1<!DOCTYPE html><!--u3SMVslZF30N18bU72H_j--><html lang="en"><head><meta charSet="utf-8"/><meta name="viewport" content="width=device-width, initial-scale=1"/><link rel="preload" href="/_next/static/media/797e433ab948586e-s.p.dbea232f.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="preload" href="/_next/static/media/caa3a2e1cccd8315-s.p.853070df.woff2" as="font" crossorigin="" type="font/woff2"/><link rel="stylesheet" href="/_next/static/chunks/0483ce684b13e733.css" data-precedence="next"/><link rel="preload" as="script" fetchPriority="low" href="/_next/static/chunks/aade72b73e1af1bf.js"/>
1<script src="/_next/static/chunks/82abf2d65f5428ae.js" async=""></script>
1<script src="/_next/static/chunks/f2f58a7e93290fbb.js" async=""></script>
1<script src="/_next/static/chunks/38eb66a58ed5ffd7.js" async=""></script>
1<script src="/_next/static/chunks/turbopack-fb2c04faabc5b22a.js" async=""></script>
1<script src="/_next/static/chunks/b1701ff67dbbd496.js" async=""></script>
1<script src="/_next/static/chunks/cb8b06f3f91e6ce0.js" async=""></script>
1<script src="/_next/static/chunks/432dcb4ed9876691.js" async=""></script>
1<script src="/_next/static/chunks/320bcfb5cbdf2b21.js" async=""></script>
1<script src="/_next/static/chunks/ff1a16fafef87110.js" async=""></script>
1<script src="/_next/static/chunks/e0df19a295da9e87.js" async=""></script>
1<script src="/_next/static/chunks/a0453ac06cf16faf.js" async=""></script>
1<script src="/_next/static/chunks/5b0519766a61fca9.js" async=""></script>
1<meta name="next-size-adjust" content=""/><title>Create Next App</title><meta name="description" content="Generated by create next app"/><link rel="icon" href="/favicon.ico?favicon.0b3bf435.ico" sizes="256x256" type="image/x-icon"/>
1<script>(function(){try{var m=localStorage.getItem('theme-preference')||'auto';var t=m==='auto'?(window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'):m;document.documentElement.setAttribute('data-theme',t);}catch(e){}})();</script>
1<script src="/_next/static/chunks/a6dad97d9634a72d.js" noModule=""></script>
1</head><body class="geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable antialiased"><div hidden=""><!--$--><!--/$--></div><nav class="fixed top-0 left-0 w-full h-20 z-50 flex items-center justify-between px-8 md:px-12 transition-colors duration-700 ease-[cubic-bezier(0.16,1,0.3,1)]" style="background-color:rgba(var(--bg-primary-rgb), 0);backdrop-filter:blur(0px)"><div class="absolute inset-0 bg-[var(--bg-primary)]" style="opacity:0"></div><div class="relative z-10 flex items-center gap-4" style="opacity:0;transform:translateX(-20px)"><div class="relative items-center bg-[var(--text-primary)]/5 border border-[var(--text-primary)]/10 rounded-md p-1 shadow-inner hidden md:flex w-64 h-10"><div class="absolute top-1 bottom-1 rounded-md bg-[var(--text-primary)]/10 shadow-sm" style="width:calc(50% - 4px)"></div><button aria-label="Händler" aria-pressed="true" class="relative flex-1 min-w-0 h-full z-10 flex items-center justify-center cursor-pointer transition-opacity duration-300 text-sm whitespace-nowrap overflow-hidden opacity-100 font-semibold"><span>Händler</span></button><button aria-label="Verbraucher" aria-pressed="false" class="relative flex-1 min-w-0 h-full z-10 flex items-center justify-center cursor-pointer transition-opacity duration-300 text-sm font-medium whitespace-nowrap overflow-hidden opacity-60"><span>Verbraucher</span></button></div><button class="md:hidden flex items-center justify-center w-10 h-10 rounded-md hover:bg-[var(--text-primary)]/5 transition-colors" aria-label="Open menu"><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-menu" aria-hidden="true"><path d="M4 5h16"></path><path d="M4 12h16"></path><path d="M4 19h16"></path></svg></button></div><div class="text-3xl font-bold tracking-[0.2em] uppercase absolute left-1/2 -translate-x-1/2 cursor-pointer z-20 flex items-center" style="opacity:1"><a class="flex" href="/"><span style="opacity:0;transform:translateY(10px)">Z</span><span style="opacity:0;transform:translateY(10px)">Y</span><span style="opacity:0;transform:translateY(10px)">S</span><span style="opacity:0;transform:translateY(10px)">Y</span><span style="opacity:0;transform:translateY(10px)">G</span><span style="opacity:0;transform:translateY(10px)">Y</span></a></div><div class="relative z-10 flex items-center" style="width:max-content;min-width:8rem;height:2.5rem;position:relative;opacity:0;transform:translateX(-20px)"><div class="flex gap-3 items-center" style="position:absolute;right:0"><div class="relative flex items-center bg-[var(--text-primary)]/5 border border-[var(--text-primary)]/10 rounded-md p-1 shadow-inner h-10 w-20"><div class="absolute top-1 bottom-1 rounded-md bg-[var(--text-primary)]/10 shadow-sm" style="width:calc(50% - 4px)"></div><button aria-label="DE" aria-pressed="true" class="relative flex-1 min-w-0 h-full z-10 flex items-center justify-center cursor-pointer transition-opacity duration-300 text-sm whitespace-nowrap overflow-hidden opacity-100 font-semibold"><span>DE</span></button><button aria-label="EN" aria-pressed="false" class="relative flex-1 min-w-0 h-full z-10 flex items-center justify-center cursor-pointer transition-opacity duration-300 text-sm font-medium whitespace-nowrap overflow-hidden opacity-60"><span>EN</span></button></div><div class="hidden md:flex"><div role="group" aria-label="Theme" class="relative flex items-center bg-[var(--text-primary)]/5 border border-[var(--text-primary)]/10 rounded-md p-1 shadow-inner w-28 h-10"><div class="absolute top-1 bottom-1 rounded-md bg-[var(--text-primary)]/10 shadow-sm" style="width:calc(33.333333333333336% - 2.6666666666666665px)"></div><button aria-label="Light" aria-pressed="false" class="relative flex-1 min-w-0 h-full z-10 flex items-center justify-center cursor-pointer transition-opacity duration-300 text-sm font-medium whitespace-nowrap overflow-hidden opacity-60"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-sun w-3.5 h-3.5" aria-hidden="true"><circle cx="12" cy="12" r="4"></circle><path d="M12 2v2"></path><path d="M12 20v2"></path><path d="m4.93 4.93 1.41 1.41"></path><path d="m17.66 17.66 1.41 1.41"></path><path d="M2 12h2"></path><path d="M20 12h2"></path><path d="m6.34 17.66-1.41 1.41"></path><path d="m19.07 4.93-1.41 1.41"></path></svg></button><button aria-label="Auto" aria-pressed="true" class="relative flex-1 min-w-0 h-full z-10 flex items-center justify-center cursor-pointer transition-opacity duration-300 text-sm whitespace-nowrap overflow-hidden opacity-100 font-semibold"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-monitor w-3.5 h-3.5" aria-hidden="true"><rect width="20" height="14" x="2" y="3" rx="2"></rect><line x1="8" x2="16" y1="21" y2="21"></line><line x1="12" x2="12" y1="17" y2="21"></line></svg></button><button aria-label="Dark" aria-pressed="false" class="relative flex-1 min-w-0 h-full z-10 flex items-center justify-center cursor-pointer transition-opacity duration-300 text-sm font-medium whitespace-nowrap overflow-hidden opacity-60"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-moon w-3.5 h-3.5" aria-hidden="true"><path d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"></path></svg></button></div></div></div><button class="px-5 h-10 rounded-md font-semibold text-sm hover:opacity-80 active:scale-95 transition-all whitespace-nowrap border border-[var(--btn-primary-border)]" style="position:absolute;right:0;background-color:var(--btn-primary-bg);color:#E25B28">Warteliste beitreten</button></div></nav><button class="fixed top-0 right-0 h-20 px-8 md:px-12 z-[60] flex items-center" style="pointer-events:none;opacity:0;transform:translateX(40px)"><span class="px-5 h-10 rounded-md font-semibold text-sm hover:opacity-80 active:scale-95 transition-all whitespace-nowrap flex items-center border border-[var(--btn-primary-border)]" style="background-color:var(--btn-primary-bg);color:#E25B28">Warteliste beitreten</span></button><main class="flex flex-col items-center justify-center w-full" style="opacity:0;transform:translateX(-20px)"><section id="hero-section" style="min-height:calc(100vh - 80px);margin-top:80px;padding-top:0;padding-bottom:0" class="min-h-screen w-full flex flex-col px-5 md:px-[20%] max-w-[1920px] mx-auto items-center justify-center py-0 text-center"><div class="w-full max-w-4xl flex flex-col items-center text-center px-6 md:px-0"><h1 class="font-medium tracking-tight mb-6" style="font-size:clamp(2.2rem, 4.7vw, 4.3rem);line-height:1.05;color:var(--text-warm);opacity:0;transform:translateY(28px)">Du führst dein Unternehmen.<br/><span style="color:var(--text-warm)">Wir erledigen den Rest.</span></h1><p class="font-light max-w-[760px] mx-auto mb-10 text-center" style="font-size:clamp(0.9rem, 1.2vw, 1.05rem);line-height:1.75;color:var(--text-warm-secondary);opacity:0;transform:translateY(20px)">Ein Unternehmen zu führen ist schwer genug. Nimm Zahlungen sofort per Smartphone an.<br/>Keine Hardware, keine Transaktionsgebühren.</p><div class="flex flex-col sm:flex-row gap-3 items-center" style="opacity:0;transform:translateY(16px)"><div class="flex flex-row items-center justify-center gap-3 flex-wrap"><button class="h-13 px-8 rounded-md font-semibold text-base active:scale-95 transition-all hover:opacity-80 border border-[var(--btn-primary-border)]" style="height:3.25rem;background-color:var(--btn-primary-bg);color:#FFFFFF">Ersparnisse berechnen â</button><a href="/plans" style="display:inline-flex;align-items:center;justify-content:center;height:2.75rem;padding-left:1.5rem;padding-right:1.5rem;border-radius:0.5rem;font-size:0.9375rem;font-weight:600;text-decoration:none;border:1.5px solid var(--border);background-color:transparent;color:var(--text-primary);transition:opacity 0.15s;
1white-space:nowrap">Preise ansehen</a></div></div><div class="h-0 w-full mt-10"></div></div></section><section class="w-full flex flex-col px-5 md:px-[20%] max-w-[1920px] mx-auto py-32 min-h-0 h-auto pt-8 pb-32 justify-start"><div class="w-full flex flex-col gap-16" style="opacity:0;transform:translateY(40px)"><div class="w-full mx-auto rounded-3xl overflow-hidden" style="max-width:1380px"><div class="flex flex-col items-center text-center pt-8 px-16 pb-[7.5rem]"><h2 class="font-medium tracking-tight" style="font-size:clamp(2.2rem, 4vw, 3.4rem);line-height:1.12;color:var(--text-warm)">Warum Unternehmen ZYSYGY wählen</h2></div><div class="px-16 pb-16 flex flex-col lg:flex-row gap-12 items-start"><div class="flex flex-col flex-1 justify-start lg:mt-[3.75rem]" style="gap:20px"><div class="relative flex items-center bg-[var(--text-primary)]/5 border border-[var(--text-primary)]/10 rounded-md p-1 shadow-inner h-10 w-full"><div class="absolute top-1 bottom-1 rounded-md bg-[var(--text-primary)]/10 shadow-sm" style="width:calc(33.333333333333336% - 2.6666666666666665px)"></div><button aria-label="Alles" aria-pressed="true" class="relative flex-1 min-w-0 h-full z-10 flex items-center justify-center cursor-pointer transition-opacity duration-300 text-sm whitespace-nowrap overflow-hidden opacity-100 font-semibold"><span>Alles</span></button><button aria-label="Sofort" aria-pressed="false" class="relative flex-1 min-w-0 h-full z-10 flex items-center justify-center cursor-pointer transition-opacity duration-300 text-sm font-medium whitespace-nowrap overflow-hidden opacity-60"><span>Sofort</span></button><button aria-label="Kostenlos" aria-pressed="false" class="relative flex-1 min-w-0 h-full z-10 flex items-center justify-center cursor-pointer transition-opacity duration-300 text-sm font-medium whitespace-nowrap overflow-hidden opacity-60"><span>Kostenlos</span></button></div><div class="relative h-px bg-[var(--text-primary)]/10 rounded-full overflow-hidden mt-2"><div class="absolute left-0 top-0 h-full bg-[var(--accent)]" style="width:0%"></div></div><div style="display:grid;padding-top:24px"><div aria-hidden="false" style="grid-row:1;grid-column:1;display:flex;flex-direction:column;gap:16px"><h3 class="font-medium tracking-tight" style="font-size:clamp(1.55rem, 2.2vw, 2.1rem);line-height:1.15;color:var(--text-warm)">Dein Smartphone ist bereits ein vollständiges Kassensystem.</h3><p class="leading-loose" style="color:var(--text-warm-secondary)">Terminal. Kartenleser. Kasse. Lagerverwaltung. Personalverwaltung. Alles läuft auf dem Smartphone, das du bereits in der Tasche hast. Alles was du brauchst, nichts was du kaufen musst.</p></div><div aria-hidden="true" style="grid-row:1;grid-column:1;display:flex;flex-direction:column;gap:16px"><h3 class="font-medium tracking-tight" style="font-size:clamp(1.55rem, 2.2vw, 2.1rem);line-height:1.15;color:var(--text-warm)">Geld in deiner Wallet in dem Moment, in dem gezahlt wird.</h3><p class="leading-loose" style="color:var(--text-warm-secondary)">Zahlung bestätigt, das Geld landet sofort in deiner ZYSYGY-Wallet. Hebe es jederzeit auf dein Bankkonto ab oder lass es automatisch am Ende jedes Tages abrechnen. Du wartest nie auf dein eigenes Geld.</p></div><div aria-hidden="true" style="grid-row:1;grid-column:1;display:flex;flex-direction:column;gap:16px"><h3 class="font-medium tracking-tight" style="font-size:clamp(1.55rem, 2.2vw, 2.1rem);line-height:1.15;color:var(--text-warm)">Null Gebühren. Nicht niedrigere Gebühren. <span style="color:#E25B28">Null.</span></h3><p class="leading-loose" style="color:var(--text-warm-secondary)">Jeder Euro, den du verdienst, bleibt bei dir. Kein Prozentsatz abgezogen, keine monatliche Terminalgebühr, kein versteckter Aufschlag. ZYSYGY verdient an Premium-Funktionen, die Händler freiwillig freischalten. Deine Zahlungen waren nie unsere Einnahmequelle, und das wird sich nie ändern.</p></div></div></div><div class="flex flex-col flex-1 gap-4"><div class="flex flex-col gap-6 p-10 rounded-lg w-full" style="background-color:rgba(10,10,10,0.05);border:1px solid rgba(10,10,10,0.10)"><div class="flex flex-col gap-2"><label class="text-xl font-semibold" style="color:#111111">Die versteckten Kosten</label>
1<select class="w-full px-4 rounded-md font-medium text-base focus:outline-none transition-colors cursor-pointer" style="color:#666666;padding-top:14px;padding-bottom:14px;background-color:rgba(255,255,255,0.70);border:1px solid rgba(0,0,0,0.12)"><option value="" disabled="" selected="">Anbieter auswählen</option><option value="SumUp">SumUp</option><option value="Zettle by PayPal">Zettle by PayPal</option><option value="Stripe Terminal">Stripe Terminal</option><option value="PAYONE">PAYONE</option><option value="Nexi (Concardis)">Nexi (Concardis)</option><option value="Sparkasse (S-POS)">Sparkasse (S-POS)</option><option value="VR Payment">VR Payment</option><option value="Flatpay">Flatpay</option><option value="Cash only">Nur Bargeld</option><option value="Other">Andere</option></select></div><div class="flex flex-col gap-3"><div class="flex justify-between items-end"><label class="text-xs font-bold uppercase tracking-widest" style="color:#555555">Monatliches Kartenvolumen</label><span class="text-lg font-semibold" style="color:#111111">10.000 â¬</span></div><input type="range" min="500" max="50000" step="500" class="w-full h-2 rounded-full appearance-none cursor-pointer" style="background:rgba(0,0,0,0.15);accent-color:#0a0a0a" value="10000"/><div class="flex justify-between text-xs" style="color:#555555"><span>500 â¬</span><span>50.000 â¬</span></div></div><div class="flex flex-col pt-6 flex-1" style="border-top:1px solid rgba(0,0,0,0.12)"><div class="text-xs font-bold uppercase tracking-widest" style="color:#555555">Deine jährlichen Ersparnisse</div><div class="flex items-center" style="min-height:80px"><div class="font-bold" style="font-size:clamp(2.5rem, 5vw, 4rem);line-height:1.1;color:#111111">2.000 â¬</div></div><div class="text-xs" style="color:#666666;visibility:inherit">Basierend auf durchschnittlichen Anbietergebühren. Wähle deinen Anbieter oben aus.</div></div></div><p class="text-xs tracking-wide mt-1 text-center" style="color:#E25B28;font-style:italic">Die Branche versteckt das im Kleingedruckten. Wir stellen es auf die Seite.</p></div></div></div></div></section><section class="w-full flex flex-col justify-center px-5 md:px-[20%] max-w-[1920px] mx-auto min-h-0 h-auto py-32"><div class="w-full flex flex-col gap-8 md:gap-16" style="opacity:0;transform:translateY(40px)"><div class="text-center"><h2 class="font-medium tracking-tight mb-3 text-center" style="font-size:clamp(2rem, 3.5vw, 3.2rem);line-height:1.15;color:var(--text-warm)">Mehr als Zahlungen.<br/>Alles, was dein Unternehmen braucht.</h2><p class="text-center" style="font-size:clamp(1rem, 1.2vw, 1.15rem);color:var(--text-warm-secondary)">Zahlungs-Apps nehmen eine Provision und verschwinden. ZYSYGY nimmt nichts und bleibt. Vom Moment der Kundenzahlung bis zur Steuererklärung deines Steuerberaters ist jeder Schritt abgedeckt.</p></div><div class="flex flex-col md:grid gap-x-8" style="grid-template-columns:1fr 1fr"><div style="display:flex;flex-direction:column;min-height:420px"><div class="overflow-x-auto whitespace-nowrap"><div class="relative flex items-center bg-[var(--text-primary)]/5 border border-[var(--text-primary)]/10 rounded-md p-1 shadow-inner h-10 w-full"><div class="absolute top-1 bottom-1 rounded-md bg-[var(--text-primary)]/10 shadow-sm" style="width:calc(25% - 2px)"></div><button aria-label="Kasse" aria-pressed="true" class="relative flex-1 min-w-0 h-full z-10 flex items-center justify-center cursor-pointer transition-opacity duration-300 text-sm whitespace-nowrap overflow-hidden opacity-100 font-semibold"><span>Kasse</span></button><button aria-label="Betrieb" aria-pressed="false" class="relative flex-1 min-w-0 h-full z-10 flex items-center justify-center cursor-pointer transition-opacity duration-300 text-sm font-medium whitespace-nowrap overflow-hidden opacity-60"><span>Betrieb</span></button><button aria-label="Bezahlen" aria-pressed="false" class="relative flex-1 min-w-0 h-full z-10 flex items-center justify-center cursor-pointer transition-opacity duration-300 text-sm font-medium whitespace-nowrap overflow-hidden opacity-60"><span>Bezahlen</span></button><button aria-label="Compliance" aria-pressed="false" class="relative flex-1 min-w-0 h-full z-10 flex items-center justify-center cursor-pointer transition-opacity duration-300 text-sm font-medium whitespace-nowrap overflow-hidden opacity-60"><span>Compliance</span></button></div><div class="relative h-px bg-[var(--text-primary)]/10 rounded-full overflow-hidden mt-2"><div class="absolute left-0 top-0 h-full bg-[var(--accent)]" style="width:0%"></div></div></div><div style="flex:1;margin-top:24px"><div class="flex flex-col gap-5" style="opacity:0;transform:translateX(20px)"><div><h3 class="font-semibold tracking-tight mb-4" style="font-size:clamp(1.55rem, 2.2vw, 2.1rem);line-height:1.2;color:var(--text-warm)">Jede Zahlung. Ihr eigener QR-Code.</h3><p class="leading-relaxed mb-4" style="font-size:clamp(0.95rem, 1.1vw, 1.1rem);color:var(--text-warm-secondary)">
1Betrag eingeben oder Artikel aus deinem Katalog auswählen. ZYSYGY generiert einen einzigartigen QR-Code für genau diese Transaktion. Kunde scannt. Zahlung bestätigt. Beleg gesendet. Lager aktualisiert. Alles auf einmal.</p><p style="font-size:1rem;color:#E25B28;font-style:italic;font-weight:600">Eine App. Jedes Werkzeug, das dein Unternehmen braucht.</p></div></div></div></div><div class="flex items-center justify-center w-full overflow-hidden"><div style="width:100%;opacity:0"><div style="display:flex;justify-content:center;padding:0 0 56px"><div style="position:relative;display:flex;align-items:flex-start"><div style="background:var(--mockup-panel-bg, rgba(13,12,11,0.76));backdrop-filter:blur(24px) saturate(190%);-webkit-backdrop-filter:blur(24px) saturate(190%);border:1px solid rgba(255,255,255,0.09);border-top:1px solid rgba(255,255,255,0.17);box-shadow:0 1px 0 rgba(255,255,255,0.08) inset;overflow:hidden;border-radius:44px;width:210px;height:455px;display:flex;flex-direction:column;position:relative;flex-shrink:0;z-index:1"><div style="height:44px;display:flex;justify-content:space-between;align-items:center;padding:0 24px;flex-shrink:0"><span style="color:white;font-size:12px;font-weight:600">9:41</span><div style="display:flex;gap:5px;align-items:center"><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="white" stroke-opacity="0.4"></rect><rect x="1.5" y="1.5" width="16" height="9" rx="1.5" fill="white"></rect><path d="M23 3.5V8.5C24 8.2 24.5 7.4 24.5 6C24.5 4.6 24 3.8 23 3.5Z" fill="white" fill-opacity="0.4"></path></svg></div></div><div style="flex:1;padding:4px 12px 0;display:flex;flex-direction:column;overflow:hidden"><div style="text-align:center;margin-bottom:6px"><span style="color:white;font-size:10px;letter-spacing:0.14em;font-weight:500">CAFà MILA</span></div><div style="height:1px;background:rgba(255,255,255,0.07);margin-bottom:8px"></div><div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;flex:1"><div style="border-radius:12px;overflow:hidden;height:82px;position:relative;cursor:default;border:1.5px solid rgba(255,255,255,0.60);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15)"><div style="background:radial-gradient(ellipse at 40% 35%, #c4956a 0%, transparent 55%), radial-gradient(ellipse at 65% 65%, #6b3a20 0%, transparent 50%), linear-gradient(145deg, #4a2510 0%, #9a5c2a 45%, #5a2e12 100%);position:absolute;inset:0"></div><div style="position:absolute;bottom:0;left:0;right:0;height:36px;background:linear-gradient(transparent, rgba(0,0,0,0.65));padding:0 7px 5px;display:flex;align-items:flex-end;justify-content:space-between"><span style="color:white;font-size:9px;font-weight:600">Cappuccino</span><span style="color:rgba(255,255,255,0.60);font-size:8px">â¬3.80</span></div><div style="position:absolute;top:5px;right:5px;width:15px;height:15px;border-radius:50%;background:white;display:flex;align-items:center;justify-content:center;font-size:8px;color:#1a1a1a;font-weight:700;line-height:1">â</div></div><div style="border-radius:12px;overflow:hidden;height:82px;position:relative;cursor:default;border:1.5px solid rgba(255,255,255,0.60);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.15)"><div style="background:radial-gradient(ellipse at 45% 35%, #d4a855 0%, transparent 50%), radial-gradient(ellipse at 60% 65%, #a07828 0%, transparent 45%), linear-gradient(150deg, #7a5818 0%, #c49535 50%, #8a6520 100%);position:absolute;inset:0"></div><div style="position:absolute;bottom:0;left:0;right:0;height:36px;background:linear-gradient(transparent, rgba(0,0,0,0.65));padding:0 7px 5px;display:flex;align-items:flex-end;justify-content:space-between"><span style="color:white;font-size:9px;font-weight:600">Croissant</span><span style="color:rgba(255,255,255,0.60);font-size:8px">â¬2.50</span></div><div style="position:absolute;top:5px;right:5px;width:15px;height:15px;border-radius:50%;background:white;display:flex;align-items:center;justify-content:center;font-size:8px;color:#1a1a1a;font-weight:700;line-height:1">â</div></div><div style="border-radius:12px;overflow:hidden;height:82px;position:relative;cursor:default"><div style="background:radial-gradient(ellipse at 40% 40%, #8aaa5a 0%, transparent 50%), radial-gradient(ellipse at 65% 60%, #4a6a2a 0%, transparent 45%), linear-gradient(145deg, #3a5520 0%, #7a9a45 45%, #4a6528 100%);position:absolute;inset:0"></div><div style="position:absolute;bottom:0;left:0;right:0;height:36px;background:linear-gradient(transparent, rgba(0,0,0,0.65));padding:0 7px 5px;display:flex;align-items:flex-end;justify-content:space-between"><span style="color:white;font-size:9px;font-weight:600">Matcha Latte</span><span style="color:rgba(255,255,255,0.60);font-size:8px">â¬4.50</span></div></div><div style="border-radius:12px;overflow:hidden;height:82px;position:relative;cursor:default"><div style="background:radial-gradient(ellipse at 50% 30%, #4a2510 0%, transparent 45%), radial-gradient(circle at 35% 65%, #1a0a04 0%, transparent 40%), linear-gradient(160deg, #120804 0%, #2e1408 60%, #0a0402 100%);position:absolute;inset:0"></div><div style="position:absolute;bottom:0;left:0;right:0;height:36px;background:linear-gradient(transparent, rgba(0,0,0,0.65));padding:0 7px 5px;display:flex;align-items:flex-end;justify-content:space-between"><span style="color:white;font-size:9px;font-weight:600">Espresso</span><span style="color:rgba(255,255,255,0.60);font-size:8px">â¬2.20</span></div></div><div style="border-radius:12px;overflow:hidden;height:82px;position:relative;cursor:default"><div style="background:radial-gradient(ellipse at 40% 40%, #8aaa5a 0%, transparent 45%), radial-gradient(ellipse at 60% 30%, #c4b855 0%, transparent 40%), linear-gradient(145deg, #5a6a28 0%, #8a9a40 45%, #4a5820 100%);position:absolute;inset:0"></div><div style="position:absolute;bottom:0;left:0;right:0;height:36px;background:linear-gradient(transparent, rgba(0,0,0,0.65));padding:0 7px 5px;display:flex;align-items:flex-end;justify-content:space-between"><span style="color:white;font-size:9px;font-weight:600">Avocado Toast</span><span style="color:rgba(255,255,255,0.60);font-size:8px">â¬7.50</span></div></div><div style="border-radius:12px;overflow:hidden;height:82px;position:relative;cursor:default"><div style="background:radial-gradient(ellipse at 45% 35%, #d4c4b0 0%, transparent 50%), radial-gradient(ellipse at 60% 65%, #a89880 0%, transparent 45%), linear-gradient(150deg, #8a7860 0%, #c4b4a0 50%, #9a8870 100%);position:absolute;inset:0"></div><div style="position:absolute;bottom:0;left:0;right:0;height:36px;background:linear-gradient(transparent, rgba(0,0,0,0.65));padding:0 7px 5px;display:flex;align-items:flex-end;justify-content:space-between"><span style="color:white;font-size:9px;font-weight:600">Flat White</span><span style="color:rgba(255,255,255,0.60);font-size:8px">â¬3.50</span></div></div></div><div style="background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:10px;padding:9px 12px;display:flex;justify-content:space-between;align-items:center;margin-top:8px;flex-shrink:0"><span style="color:white;font-size:10px;font-weight:500">Cappuccino + Croissant</span><span style="color:white;font-size:13px;font-weight:800">â¬6.30</span></div><div style="background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);border-radius:10px;height:40px;width:100%;display:flex;align-items:center;justify-content:center;margin-top:8px;flex-shrink:0;cursor:default"><span style="color:white;font-size:11px;font-weight:700">Generate QR</span></div></div><div style="width:100px;height:4px;background:rgba(255,255,255,0.25);border-radius:2px;margin:8px auto 6px;flex-shrink:0"></div></div><div style="position:absolute;
1left:198px;top:42%;transform:translateY(-50%);color:rgba(255,255,255,0.18);font-size:18px;z-index:3;user-select:none;pointer-events:none;line-height:1">âº</div><div style="background:var(--mockup-panel-bg, rgba(13,12,11,0.76));backdrop-filter:blur(24px) saturate(190%);-webkit-backdrop-filter:blur(24px) saturate(190%);border:1px solid rgba(255,255,255,0.09);border-top:1px solid rgba(255,255,255,0.17);box-shadow:0 1px 0 rgba(255,255,255,0.08) inset;overflow:hidden;border-radius:44px;width:210px;height:455px;display:flex;flex-direction:column;position:relative;flex-shrink:0;transform:translateY(28px);margin-left:-12px;z-index:2"><div style="height:44px;display:flex;justify-content:space-between;align-items:center;padding:0 24px;flex-shrink:0"><span style="color:white;font-size:12px;font-weight:600">9:41</span><div style="display:flex;gap:5px;align-items:center"><svg width="25" height="12" viewBox="0 0 25 12" fill="none"><rect x="0.5" y="0.5" width="21" height="11" rx="2.5" stroke="white" stroke-opacity="0.4"></rect><rect x="1.5" y="1.5" width="16" height="9" rx="1.5" fill="white"></rect><path d="M23 3.5V8.5C24 8.2 24.5 7.4 24.5 6C24.5 4.6 24 3.8 23 3.5Z" fill="white" fill-opacity="0.4"></path></svg></div></div><div style="flex:1;display:flex;flex-direction:column;align-items:center;padding:8px 16px 0"><div style="color:rgba(255,255,255,0.45);font-size:10px;letter-spacing:0.10em;margin-bottom:6px">Payment Request</div><div style="color:white;font-size:40px;font-weight:800;letter-spacing:-0.03em;line-height:1">â¬6.30</div><div style="color:rgba(255,255,255,0.38);font-size:10px;margin-top:5px;margin-bottom:14px">Cappuccino + Croissant</div><div style="background:white;border-radius:10px;padding:8px;width:116px;height:116px;box-shadow:0 4px 20px rgba(0,0,0,0.4);display:flex;align-items:center;justify-content:center;flex-shrink:0"><svg width="100" height="100" viewBox="0 0 105 105"><rect x="0" y="0" width="35" height="35" fill="#111"></rect><rect x="5" y="5" width="25" height="25" fill="white"></rect><rect x="10" y="10" width="15" height="15" fill="#111"></rect><rect x="70" y="0" width="35" height="35" fill="#111"></rect><rect x="75" y="5" width="25" height="25" fill="white"></rect><rect x="80" y="10" width="15" height="15" fill="#111"></rect><rect x="0" y="70" width="35" height="35" fill="#111"></rect><rect x="5" y="75" width="25" height="25" fill="white"></rect><rect x="10" y="80" width="15" height="15" fill="#111"></rect><rect x="40" y="30" width="5" height="5" fill="#111"></rect><rect x="50" y="30" width="5" height="5" fill="#111"></rect><rect x="60" y="30" width="5" height="5" fill="#111"></rect><rect x="30" y="40" width="5" height="5" fill="#111"></rect><rect x="30" y="50" width="5" height="5" fill="#111"></rect><rect x="30" y="60" width="5" height="5" fill="#111"></rect><rect x="35" y="0" width="5" height="5" fill="#111"></rect><rect x="45" y="0" width="5" height="5" fill="#111"></rect><rect x="55" y="0" width="5" height="5" fill="#111"></rect><rect x="65" y="0" width="5" height="5" fill="#111"></rect><rect x="40" y="5" width="5" height="5" fill="#111"></rect><rect x="50" y="5" width="5" height="5" fill="#111"></rect><rect x="60" y="5" width="5" height="5" fill="#111"></rect><rect x="35" y="10" width="5" height="5" fill="#111"></rect><rect x="45" y="10" width="5" height="5" fill="#111"></rect><rect x="60" y="10" width="5" height="5" fill="#111"></rect><rect x="40" y="15" width="5" height="5" fill="#111"></rect><rect x="55" y="15" width="5" height="5" fill="#111"></rect><rect x="65" y="15" width="5" height="5" fill="#111"></rect><rect x="35" y="20" width="5" height="5" fill="#111"></rect><rect x="50" y="20" width="5" height="5" fill="#111"></rect><rect x="65" y="20" width="5" height="5" fill="#111"></rect><rect x="40" y="25" width="5" height="5" fill="#111"></rect><rect x="55" y="25" width="5" height="5" fill="#111"></rect><rect x="0" y="40" width="5" height="5" fill="#111"></rect><rect x="10" y="40" width="5" height="5" fill="#111"></rect><rect x="20" y="40" width="5" height="5" fill="#111"></rect><rect x="5" y="45" width="5" height="5" fill="#111"></rect><rect x="15" y="45" width="5" height="5" fill="#111"></rect><rect x="25" y="45" width="5" height="5" fill="#111"></rect><rect x="0" y="50" width="5" height="5" fill="#111"></rect><rect x="10" y="50" width="5" height="5" fill="#111"></rect><rect x="25" y="50" width="5" height="5" fill="#111"></rect><rect x="5" y="55" width="5" height="5" fill="#111"></rect><rect x="20" y="55" width="5" height="5" fill="#111"></rect><rect x="0" y="60" width="5" height="5" fill="#111"></rect><rect x="10" y="60" width="5" height="5" fill="#111"></rect><rect x="25" y="60" width="5" height="5" fill="#111"></rect><rect x="35" y="40" width="5" height="5" fill="#111"></rect><rect x="40" y="40" width="5" height="5" fill="#111"></rect><rect x="50" y="40" width="5" height="5" fill="#111"></rect><rect x="60" y="40" width="5" height="5" fill="#111"></rect><rect x="70" y="40" width="5" height="5" fill="#111"></rect><rect x="80" y="40" width="5" height="5" fill="#111"></rect><rect x="90" y="40" width="5" height="5" fill="#111"></rect><rect x="100" y="40" width="5" height="5" fill="#111"></rect><rect x="35" y="45" width="5" height="5" fill="#111"></rect><rect x="45" y="45" width="5" height="5" fill="#111"></rect><rect x="55" y="45" width="5" height="5" fill="#111"></rect><rect x="65" y="45" width="5" height="5" fill="#111"></rect><rect x="75" y="45" width="5" height="5" fill="#111"></rect><rect x="85" y="45" width="5" height="5" fill="#111"></rect><rect x="95" y="45" width="5" height="5" fill="#111"></rect><rect x="40" y="50" width="5" height="5" fill="#111"></rect><rect x="55" y="50" width="5" height="5" fill="#111"></rect><rect x="65" y="50" width="5" height="5" fill="#111"></rect><rect x="80" y="50" width="5" height="5" fill="#111"></rect><rect x="95" y="50" width="5" height="5" fill="#111"></rect><rect x="100" y="50" width="5" height="5" fill="#111"></rect><rect x="35" y="55" width="5" height="5" fill="#111"></rect><rect x="45" y="55" width="5" height="5" fill="#111"></rect><rect x="60" y="55" width="5" height="5" fill="#111"></rect><rect x="70" y="55" width="5" height="5" fill="#111"></rect><rect x="85" y="55" width="5" height="5" fill="#111"></rect><rect x="100" y="55" width="5" height="5" fill="#111"></rect><rect x="40" y="60" width="5" height="5" fill="#111"></rect><rect x="50" y="60" width="5" height="5" fill="#111"></rect><rect x="65" y="60" width="5" height="5" fill="#111"></rect><rect x="80" y="60" width="5" height="5" fill="#111"></rect><rect x="90" y="60" width="5" height="5" fill="#111"></rect><rect x="40" y="65" width="5" height="5" fill="#111"></rect><rect x="55" y="65" width="5" height="5" fill="#111"></rect><rect x="70" y="65" width="5" height="5" fill="#111"></rect><rect x="85" y="65" width="5" height="5" fill="#111"></rect><rect x="100" y="65" width="5" height="5" fill="#111"></rect><rect x="35" y="70" width="5" height="5" fill="#111"></rect><rect x="45" y="70" width="5" height="5" fill="#111"></rect><rect x="60" y="70" width="5" height="5" fill="#111"></rect><rect x="75" y="70" width="5" height="5" fill="#111"></rect><rect x="90" y="70" width="5" height="5" fill="#111"></rect><rect x="40" y="75" width="5" height="5" fill="#111"></rect><rect x="50" y="75" width="5" height="5" fill="#111"></rect><rect x="65" y="75" width="5" height="5" fill="#111"></rect><rect x="80" y="75" width="5" height="5" fill="#111"></rect><rect x="95" y="75" width="5" height="5" fill="#111"></rect><rect x="100" y="75" width="5" height="5" fill="#111"></rect><rect x="35" y="80" width="5" height="5" fill="#111"></rect><rect x="55" y="80" width="5" height="5" fill="#111"></rect><rect x="70" y="80" width="5" height="5" fill="#111"></rect><rect x="85" y="80" width="5" height="5" fill="#111"></rect><rect x="45" y="85" width="5" height="5" fill="#111"></rect><rect x="60" y="85" width="5" height="5" fill="#111"></rect><rect x="75" y="85" width="5" height="5" fill="#111"></rect><rect x="90" y="85" width="5" height="5" fill="#111"></rect><rect x="100" y="85" width="5" height="5" fill="#111"></rect><rect x="35" y="90" width="5" height="5" fill="#111"></rect><rect x="50" y="90" width="5" height="5" fill="#111"></rect><rect x="65" y="90" width="5" height="5" fill="#111"></rect><rect x="80" y="90" width="5" height="5" fill="#111"></rect><rect x="40" y="95" width="5" height="5" fill="#111"></rect><rect x="55" y="95" width="5" height="5" fill="#111"></rect><rect x="70" y="95" width="5" height="5" fill="#111"></rect><rect x="85" y="95" width="5" height="5" fill="#111"></rect><rect x="100" y="95" width="5" height="5" fill="#111"></rect><rect x="35" y="100" width="5" height="5" fill="#111"></rect><rect x="50" y="100" width="5" height="5" fill="#111"></rect><rect x="65" y="100" width="5" height="5" fill="#111"></rect><rect x="75" y="100" width="5" height="5" fill="#111"></rect><rect x="90" y="100" width="5" height="5" fill="#111"></rect><rect x="100" y="100" width="5" height="5" fill="#111"></rect></svg></div><div style="text-align:center;margin:12px 0 10px"><div style="color:rgba(255,255,255,0.28);font-size:9px">Unique to this transaction</div><div style="color:rgba(255,255,255,0.20);font-size:9px;margin-top:3px">Valid for 5 minutes</div></div><div style="display:flex;align-items:center;gap:6px"><div style="width:5px;height:5px;border-radius:50%;background:#22c55e;flex-shrink:0"></div><span style="color:rgba(255,255,255,0.32);font-size:9px">Waiting for scan</span></div></div><div style="width:100px;height:4px;background:rgba(255,255,255,0.25);border-radius:2px;margin:8px auto 6px;flex-shrink:0"></div></div></div></div></div></div></div></div></section><section class="w-full flex flex-col justify-center px-5 md:px-[20%] max-w-[1920px] mx-auto min-h-0 h-auto py-32 overflow-hidden"><div class="w-full flex flex-col gap-0" style="opacity:0;transform:translateY(40px)"><div class="text-center"><h2 class="font-medium tracking-tight text-center" style="font-size:clamp(2rem, 3.5vw, 3.2rem);line-height:1.15;color:var(--text-warm)">Kein Terminal. Kein Kartenleser. Nur dein Smartphone.</h2></div><div class="grid gap-8 items-start mt-8" style="grid-template-columns:repeat(auto-fit, minmax(22rem, 1fr))"><div class="flex flex-col gap-4"><div class="flex flex-col gap-2 w-fit"><div class="relative flex items-center bg-[var(--text-primary)]/5 border border-[var(--text-primary)]/10 rounded-md p-1 shadow-inner h-10 w-fit"><div class="absolute top-1 bottom-1 rounded-md bg-[var(--text-primary)]/10 shadow-sm" style="width:calc(50% - 4px)"></div><button aria-label="Per QR bezahlen" aria-pressed="true" class="relative flex-1 min-w-0 h-full z-10 flex items-center justify-center cursor-pointer transition-opacity duration-300 text-sm whitespace-nowrap overflow-hidden opacity-100 font-semibold"><span class="px-4 py-1">Per QR bezahlen</span></button><button aria-label="Tap to Pay" aria-pressed="false" class="relative flex-1 min-w-0 h-full z-10 flex items-center justify-center cursor-pointer transition-opacity duration-300 text-sm font-medium whitespace-nowrap overflow-hidden opacity-60"><span class="px-4 py-1">Tap to Pay</span></button></div><div class="relative h-px bg-[var(--text-primary)]/10 rounded-full overflow-hidden"><div class="absolute left-0 top-0 h-full bg-[var(--accent)]" style="width:0%"></div></div></div><button class="w-full text-left p-5 rounded-lg border transition-all border-[var(--text-primary)] bg-[var(--text-primary)]/10"><div class="flex items-start gap-4"><div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0 transition-colors bg-[var(--text-primary)] text-[var(--bg-primary)]">1</div><p class="leading-relaxed transition-colors font-medium" style="font-size:clamp(0.9rem, 1vw, 1rem);color:var(--text-warm-secondary)">ZYSYGY öffnen. Auswählen, was der Kunde bestellt hat, oder den Betrag eingeben.</p></div></button><button class="w-full text-left p-5 rounded-lg border transition-all border-[var(--border)] hover:border-[var(--text-secondary)]"><div class="flex items-start gap-4"><div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0 transition-colors bg-[var(--bg-card)] border border-[var(--border)] text-[var(--text-secondary)]">2</div><p class="leading-relaxed transition-colors font-medium" style="font-size:clamp(0.9rem, 1vw, 1rem);color:var(--text-warm-secondary)">Ein Zahlungs-QR erscheint sofort. Einmalig für diese Transaktion. Nur für diesen Betrag gültig.</p></div></button><button class="w-full text-left p-5 rounded-lg border transition-all border-[var(--border)] hover:border-[var(--text-secondary)]"><div class="flex items-start gap-4"><div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0 transition-colors bg-[var(--bg-card)] border border-[var(--border)] text-[var(--text-secondary)]">3</div><p class="leading-relaxed transition-colors font-medium" style="font-size:clamp(0.9rem, 1vw, 1rem);color:var(--text-warm-secondary)">Kunde scannt. Betrag vorausgefüllt. Ein Tipp zum Bezahlen.</p></div></button><button class="w-full text-left p-5 rounded-lg border transition-all border-[var(--border)] hover:border-[var(--text-secondary)]"><div class="flex items-start gap-4"><div class="w-8 h-8 rounded-full flex items-center justify-center text-sm font-bold flex-shrink-0 transition-colors bg-[var(--bg-card)] border border-[var(--border)] text-[var(--text-secondary)]">4</div><p class="leading-relaxed transition-colors font-medium" style="font-size:clamp(0.9rem, 1vw, 1rem);color:var(--text-warm-secondary)">Bezahlt. Geld <span style="color:#E25B28">sofort</span> in deiner ZYSYGY-Wallet.</p></div></button></div><div class="min-h-[280px] flex flex-col items-center justify-center gap-6 p-8" style="opacity:0;transform:scale(0.97)"><style>
2 @keyframes qr-step-enter { 3 from { opacity: 0; transform: translateY(8px); } 4 to { opacity: 1; transform: translateY(0); } 5 } 6 @keyframes qr-scan { 7 0% { top: 0; } 8 100% { top: calc(100% - 2px); } 9 } 10 @keyframes qr-pulse { 11 0% { transform: scale(1); opacity: 1; } 12 100% { transform: scale(1.5); opacity: 0; } 13 } 14 @keyframes qr-draw-circle { to { stroke-dashoffset: 0; } } 15 @keyframes qr-draw-check { to { stroke-dashoffset: 0; } } 16</style><style> 17 @keyframes phone-float { 18 0%, 100% { transform: perspective(1200px) rotateX(3deg) translateY(0px); } 19 50% { transform: perspective(1200px) rotateX(3deg) translateY(-8px); } 20 } 21</style><div style="animation:phone-float 3s ease-in-out infinite;flex-shrink:0;will-change:transform"><div style="width:280px;height:560px;border-radius:52px;background:var(--phone-frame-shell, linear-gradient(160deg, #4a4a4e 0%, #2c2c2e 20%, #1c1c1e 50%, #28282a 78%, #3a3a3c 100%));box-shadow:0 40px 80px rgba(0,0,0,0.3), 0 10px 20px rgba(0,0,0,0.15), 0 0 0 0.5px rgba(255,255,255,0.08), inset 0 1px 0 rgba(255,255,255,0.18), inset 0 -1px 0 rgba(0,0,0,0.55), inset 1px 0 0 rgba(255,255,255,0.07), inset -1px 0 0 rgba(0,0,0,0.35);padding:3px;position:relative"><div style="width:100%;height:100%;border-radius:49px;background:var(--phone-frame-screen, #09090b);overflow:hidden;display:flex;flex-direction:column;position:relative"><div aria-hidden="true" style="position:absolute;inset:0;border-radius:inherit;background:linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 30%, transparent 60%);z-index:20;pointer-events:none"></div><div style="position:absolute;top:10px;left:50%;transform:translateX(-50%);width:110px;height:32px;background:#000;border-radius:999px;z-index:10"></div><div style="padding-top:54px;padding-left:22px;padding-right:22px;padding-bottom:6px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0"><span style="font-size:10px;font-weight:600;color:#52525b;letter-spacing:0.2px">9:41</span><div style="display:flex;align-items:center;gap:5px"><svg width="15" height="10" viewBox="0 0 15 10" fill="none"><rect x="0" y="6.5" width="2.5" height="3.5" rx="0.5" fill="#52525b"></rect><rect x="3.2" y="4" width="2.5" height="6" rx="0.5" fill="#52525b"></rect><rect x="6.4" y="2" width="2.5" height="8" rx="0.5" fill="#52525b"></rect><rect x="9.6" y="0" width="2.5" height="10" rx="0.5" fill="#52525b"></rect></svg><svg width="13" height="10" viewBox="0 0 13 10" fill="none"><path d="M0.5 3.5C3 1 10 1 12.5 3.5" stroke="#52525b" stroke-width="1.3" stroke-linecap="round"></path><path d="M2.5 6C4.2 4.3 8.8 4.3 10.5 6" stroke="#52525b" stroke-width="1.3" stroke-linecap="round"></path><circle cx="6.5" cy="8.8" r="1" fill="#52525b"></circle></svg>
21<svg width="23" height="11" viewBox="0 0 23 11" fill="none"><rect x="0.5" y="0.5" width="19" height="10" rx="2.5" stroke="#52525b" stroke-width="1"></rect><rect x="20" y="3.5" width="2.5" height="4" rx="1.25" fill="#52525b" fill-opacity="0.5"></rect><rect x="2" y="2" width="14" height="7" rx="1.5" fill="#52525b"></rect></svg></div></div><div style="flex:1;padding:0 20px 20px;display:flex;flex-direction:column;overflow:hidden;min-height:0"><div style="display:flex;flex-direction:column;height:100%;animation:qr-step-enter 300ms ease-out both"><div style="text-align:center;font-size:10px;font-weight:500;letter-spacing:0.08em;text-transform:uppercase;color:#3f3f46;margin-bottom:10px">New payment</div><div style="text-align:center;margin-bottom:8px"><div style="font-size:36px;font-weight:700;letter-spacing:-1.5px;color:#fafafa;line-height:1">â¬8.50</div></div><div style="display:flex;justify-content:center;margin-bottom:14px"><div style="background:#18181b;border:0.5px solid rgba(255,255,255,0.06);border-radius:999px;padding:4px 10px;font-size:11px;color:#71717a">Döner + Ayran</div></div><div style="display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;flex:1;min-height:0"><div style="background:#18181b;border:0.5px solid rgba(255,255,255,0.06);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:400;color:#fafafa;min-height:40px;cursor:default;user-select:none">1</div><div style="background:#18181b;border:0.5px solid rgba(255,255,255,0.06);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:400;color:#fafafa;min-height:40px;cursor:default;user-select:none">2</div><div style="background:#18181b;border:0.5px solid rgba(255,255,255,0.06);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:400;color:#fafafa;min-height:40px;cursor:default;user-select:none">3</div><div style="background:#18181b;border:0.5px solid rgba(255,255,255,0.06);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:400;color:#fafafa;min-height:40px;cursor:default;user-select:none">4</div><div style="background:#18181b;border:0.5px solid rgba(255,255,255,0.06);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:400;color:#fafafa;min-height:40px;cursor:default;user-select:none">5</div><div style="background:#18181b;border:0.5px solid rgba(255,255,255,0.06);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:400;color:#fafafa;min-height:40px;cursor:default;user-select:none">6</div><div style="background:#18181b;border:0.5px solid rgba(255,255,255,0.06);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:400;color:#fafafa;min-height:40px;cursor:default;user-select:none">7</div><div style="background:#18181b;border:0.5px solid rgba(255,255,255,0.06);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:400;color:#fafafa;min-height:40px;cursor:default;user-select:none">8</div><div style="background:#18181b;border:0.5px solid rgba(255,255,255,0.06);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:400;color:#fafafa;min-height:40px;cursor:default;user-select:none">9</div><div style="background:#27272a;border:0.5px solid rgba(255,255,255,0.06);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:400;color:#fafafa;min-height:40px;cursor:default;user-select:none">·</div><div style="background:#18181b;border:0.5px solid rgba(255,255,255,0.06);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:400;color:#fafafa;min-height:40px;cursor:default;user-select:none">0</div><div style="background:#27272a;border:0.5px solid rgba(255,255,255,0.06);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:400;color:#fafafa;min-height:40px;cursor:default;user-select:none">â«</div></div><div style="margin-top:10px"><div style="background:#a78bfa;border-radius:12px;height:44px;display:flex;align-items:center;justify-content:center;gap:7px;font-size:15px;font-weight:500;color:#09090b;box-shadow:0 0 20px rgba(167,139,250,0.25);cursor:default;user-select:none"><svg width="14" height="14" viewBox="0 0 14 14" fill="none"><rect x="1" y="1" width="4.5" height="4.5" rx="0.8" stroke="#09090b" stroke-width="1.2"></rect><rect x="2.2" y="2.2" width="2" height="2" rx="0.3" fill="#09090b"></rect><rect x="8.5" y="1" width="4.5" height="4.5" rx="0.8" stroke="#09090b" stroke-width="1.2"></rect><rect x="9.7" y="2.2" width="2" height="2" rx="0.3" fill="#09090b"></rect><rect x="1" y="8.5" width="4.5" height="4.5" rx="0.8" stroke="#09090b" stroke-width="1.2"></rect><rect x="2.2" y="9.7" width="2" height="2" rx="0.3" fill="#09090b"></rect><rect x="8.5" y="8.5" width="1.5" height="1.5" fill="#09090b"></rect><rect x="11" y="8.5" width="1.5" height="1.5" fill="#09090b"></rect><rect x="8.5" y="11" width="1.5" height="1.5" fill="#09090b"></rect><rect x="11" y="11" width="1.5" height="1.5" fill="#09090b"></rect></svg>Generate QR</div></div></div></div></div></div></div><div style="display:flex;gap:6px"><div style="height:4px;border-radius:999px;width:16px;background:#a78bfa;transition:width 300ms ease, background 300ms ease"></div><div style="height:4px;border-radius:999px;width:4px;background:#27272a;transition:width 300ms ease, background 300ms ease"></div><div style="height:4px;border-radius:999px;width:4px;background:#27272a;transition:width 300ms ease, background 300ms ease"></div><div style="height:4px;border-radius:999px;width:4px;background:#27272a;transition:width 300ms ease, background 300ms ease"></div></div></div></div></div></section><section class="w-full flex flex-col justify-center px-5 md:px-[20%] max-w-[1920px] mx-auto py-32 min-h-0 h-auto pt-32 pb-0 overflow-hidden"><div class="w-full flex flex-col gap-10" style="opacity:0;transform:translateY(40px)"><div class="text-center"><h2 class="font-medium tracking-tight mb-3 text-center" style="font-size:clamp(2rem, 3.5vw, 3.2rem);line-height:1.15;color:var(--text-warm)">
21ZYSYGY ist für jedes Unternehmen.</h2><p class="text-center" style="font-size:clamp(1rem, 1.2vw, 1.15rem);color:var(--text-warm-secondary)">Egal was du machst, ZYSYGY funktioniert für dich.</p></div><div style="position:relative;overflow:hidden;width:100vw;left:50%;transform:translateX(-50%)"><div aria-hidden="true" style="position:absolute;top:0;bottom:0;left:0;width:80px;z-index:2;pointer-events:none;background:linear-gradient(to right, var(--bg-primary) 0%, transparent 100%)"></div><div aria-hidden="true" style="position:absolute;top:0;bottom:0;right:0;width:80px;z-index:2;pointer-events:none;background:linear-gradient(to left, var(--bg-primary) 0%, transparent 100%)"></div><button aria-label="Scroll left" class="hidden md:flex" style="position:absolute;top:50%;transform:translateY(-50%);z-index:3;left:12px;width:36px;height:36px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,0.12);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;color:var(--text-primary)">â¹</button><div style="overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none"><div style="display:flex;gap:20px;width:max-content;padding:24px 60px"><div class="relative flex-shrink-0" style="width:352px;height:320px;perspective:1000px"><div class="relative w-full h-full" style="transform-style:preserve-3d"><div class="absolute inset-0 border border-[var(--border-dim)] hover:border-[var(--accent)]/40 hover:shadow-lg transition-all duration-300" style="backface-visibility:hidden;background-color:var(--bg-primary);border-radius:16px;overflow:hidden;cursor:pointer"><div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-warm-secondary)"><svg width="96" height="96" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="14" width="36" height="22" rx="3"></rect><circle cx="24" cy="25" r="5"></circle><line x1="6" y1="20" x2="12" y2="20"></line><line x1="36" y1="20" x2="42" y2="20"></line><line x1="6" y1="30" x2="12" y2="30"></line><line x1="36" y1="30" x2="42" y2="30"></line></svg></div><div style="position:absolute;bottom:24px;left:24px"><div class="font-semibold text-lg leading-tight" style="color:var(--text-warm)">Noch immer nur Bargeld</div></div><button aria-label="Show details" style="position:absolute;bottom:16px;right:16px;width:32px;height:32px;border-radius:50%;background:#26251F;color:#FFFFFF;border:none;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="7" y1="0" x2="7" y2="14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line><line x1="0" y1="7" x2="14" y2="7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line></svg></button></div><div class="absolute inset-0 flex flex-col p-6 border" style="backface-visibility:hidden;transform:rotateY(180deg);background-color:var(--card-surface);border-color:var(--border);border-radius:16px"><p class="text-sm leading-relaxed flex-1" style="color:var(--text-warm-secondary)">4 von 10 Kunden meiden Geschäfte, die keine digitalen Zahlungen akzeptieren, laut Studien. ZYSYGY kostet nichts in der Einrichtung und nichts pro Transaktion. Es gibt keinen Grund zu warten.</p><button aria-label="Close details" style="position:absolute;bottom:16px;right:16px;width:32px;height:32px;border-radius:50%;background:#26251F;color:#FFFFFF;border:none;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer"><svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="1" y1="1" x2="11" y2="11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line><line x1="11" y1="1" x2="1" y2="11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line></svg></button></div></div></div><div class="relative flex-shrink-0" style="width:352px;height:320px;perspective:1000px"><div class="relative w-full h-full" style="transform-style:preserve-3d"><div class="absolute inset-0 border border-[var(--border-dim)] hover:border-[var(--accent)]/40 hover:shadow-lg transition-all duration-300" style="backface-visibility:hidden;background-color:var(--bg-primary);border-radius:16px;overflow:hidden;cursor:pointer"><div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-warm-secondary)"><svg width="96" height="96" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M10 18 h18 v10 a9 9 0 0 1-18 0z"></path><path d="M28 20 h4 a5 5 0 0 1 0 10 h-4"></path><line x1="13" y1="38" x2="25" y2="38"></line><path d="M15 18 c0-4 3-6 3-10"></path><path d="M21 18 c0-4 3-6 3-10"></path></svg></div><div style="position:absolute;bottom:24px;left:24px"><div class="font-semibold text-lg leading-tight" style="color:var(--text-warm)">Café & Restaurant</div></div><button aria-label="Show details" style="position:absolute;bottom:16px;right:16px;width:32px;height:32px;border-radius:50%;background:#26251F;color:#FFFFFF;border:none;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
21<line x1="7" y1="0" x2="7" y2="14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line><line x1="0" y1="7" x2="14" y2="7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line></svg></button></div><div class="absolute inset-0 flex flex-col p-6 border" style="backface-visibility:hidden;transform:rotateY(180deg);background-color:var(--card-surface);border-color:var(--border);border-radius:16px"><p class="text-sm leading-relaxed flex-1" style="color:var(--text-warm-secondary)">Null Gebühren auf jede Zahlung, egal wie viel Betrieb ist. Tisch-QR-Codes, Trinkgeld-Aufforderungen, geteilte Rechnungen, Tagesabschlussberichte. Alles, was dein Team am Laufen hält und deine Marge sichert.</p><button aria-label="Close details" style="position:absolute;bottom:16px;right:16px;width:32px;height:32px;border-radius:50%;background:#26251F;color:#FFFFFF;border:none;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer"><svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="1" y1="1" x2="11" y2="11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line><line x1="11" y1="1" x2="1" y2="11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line></svg></button></div></div></div><div class="relative flex-shrink-0" style="width:352px;height:320px;perspective:1000px"><div class="relative w-full h-full" style="transform-style:preserve-3d"><div class="absolute inset-0 border border-[var(--border-dim)] hover:border-[var(--accent)]/40 hover:shadow-lg transition-all duration-300" style="backface-visibility:hidden;background-color:var(--bg-primary);border-radius:16px;overflow:hidden;cursor:pointer"><div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-warm-secondary)"><svg width="96" height="96" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M8 14 l3 -6 h26 l3 6"></path><rect x="8" y="14" width="32" height="24" rx="2"></rect><path d="M18 14 v4 a6 6 0 0 0 12 0 v-4"></path></svg></div><div style="position:absolute;bottom:24px;left:24px"><div class="font-semibold text-lg leading-tight" style="color:var(--text-warm)">Einzelhandel</div></div><button aria-label="Show details" style="position:absolute;bottom:16px;right:16px;width:32px;height:32px;border-radius:50%;background:#26251F;color:#FFFFFF;border:none;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="7" y1="0" x2="7" y2="14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line><line x1="0" y1="7" x2="14" y2="7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line></svg></button></div><div class="absolute inset-0 flex flex-col p-6 border" style="backface-visibility:hidden;transform:rotateY(180deg);background-color:var(--card-surface);border-color:var(--border);border-radius:16px"><p class="text-sm leading-relaxed flex-1" style="color:var(--text-warm-secondary)">Dein Smartphone ist deine Kasse. Produkt scannen, Zahlung annehmen, fertig. Kein Terminal zu mieten, keine Kartengebühren die deine Marge schmälern, kein Kassenabschluss am Feierabend.</p><button aria-label="Close details" style="position:absolute;bottom:16px;right:16px;width:32px;height:32px;border-radius:50%;background:#26251F;color:#FFFFFF;border:none;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer"><svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="1" y1="1" x2="11" y2="11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line><line x1="11" y1="1" x2="1" y2="11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line></svg></button></div></div></div><div class="relative flex-shrink-0" style="width:352px;height:320px;perspective:1000px"><div class="relative w-full h-full" style="transform-style:preserve-3d"><div class="absolute inset-0 border border-[var(--border-dim)] hover:border-[var(--accent)]/40 hover:shadow-lg transition-all duration-300" style="backface-visibility:hidden;background-color:var(--bg-primary);border-radius:16px;overflow:hidden;cursor:pointer"><div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-warm-secondary)"><svg width="96" height="96" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M14 36 c0-10 4-14 10-14 s10 4 10 14"></path><circle cx="24" cy="16" r="5"></circle><path d="M18 36 h12"></path><path d="M30 24 c4 0 6 2 6 6"></path><path d="M33 26 l4-2 1 4"></path></svg></div><div style="position:absolute;bottom:24px;left:24px"><div class="font-semibold text-lg leading-tight" style="color:var(--text-warm)">Beauty & Wellness</div></div><button aria-label="Show details" style="position:absolute;bottom:16px;right:16px;width:32px;height:32px;border-radius:50%;background:#26251F;color:#FFFFFF;border:none;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
21<line x1="7" y1="0" x2="7" y2="14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line><line x1="0" y1="7" x2="14" y2="7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line></svg></button></div><div class="absolute inset-0 flex flex-col p-6 border" style="backface-visibility:hidden;transform:rotateY(180deg);background-color:var(--card-surface);border-color:var(--border);border-radius:16px"><p class="text-sm leading-relaxed flex-1" style="color:var(--text-warm-secondary)">Kein Terminal auf dem Tresen. Keine Papierbelege. Nur du, dein Kunde und ein Bezahlvorgang, der drei Sekunden dauert und unsichtbar wirkt.</p><button aria-label="Close details" style="position:absolute;bottom:16px;right:16px;width:32px;height:32px;border-radius:50%;background:#26251F;color:#FFFFFF;border:none;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer"><svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="1" y1="1" x2="11" y2="11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line><line x1="11" y1="1" x2="1" y2="11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line></svg></button></div></div></div><div class="relative flex-shrink-0" style="width:352px;height:320px;perspective:1000px"><div class="relative w-full h-full" style="transform-style:preserve-3d"><div class="absolute inset-0 border border-[var(--border-dim)] hover:border-[var(--accent)]/40 hover:shadow-lg transition-all duration-300" style="backface-visibility:hidden;background-color:var(--bg-primary);border-radius:16px;overflow:hidden;cursor:pointer"><div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-warm-secondary)"><svg width="96" height="96" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><path d="M16 32 L30 18"></path><path d="M30 14 a4 4 0 0 1 4 4 l-4 4-4-4z"></path><path d="M16 32 l-4 4 a2 2 0 0 0 3 3 l4-4"></path><path d="M28 28 l6 6"></path><circle cx="34" cy="34" r="4"></circle></svg></div><div style="position:absolute;bottom:24px;left:24px"><div class="font-semibold text-lg leading-tight" style="color:var(--text-warm)">Handwerk</div></div><button aria-label="Show details" style="position:absolute;bottom:16px;right:16px;width:32px;height:32px;border-radius:50%;background:#26251F;color:#FFFFFF;border:none;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="7" y1="0" x2="7" y2="14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line><line x1="0" y1="7" x2="14" y2="7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line></svg></button></div><div class="absolute inset-0 flex flex-col p-6 border" style="backface-visibility:hidden;transform:rotateY(180deg);background-color:var(--card-surface);border-color:var(--border);border-radius:16px"><p class="text-sm leading-relaxed flex-1" style="color:var(--text-warm-secondary)">Eine Zahlungsanforderung senden, sobald die Arbeit erledigt ist. Kunde zahlt vom Smartphone. Du bist bereits auf dem Weg zum nächsten Auftrag.</p><button aria-label="Close details" style="position:absolute;bottom:16px;right:16px;width:32px;height:32px;border-radius:50%;background:#26251F;color:#FFFFFF;border:none;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer"><svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="1" y1="1" x2="11" y2="11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line><line x1="11" y1="1" x2="1" y2="11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line></svg></button></div></div></div><div class="relative flex-shrink-0" style="width:352px;height:320px;perspective:1000px"><div class="relative w-full h-full" style="transform-style:preserve-3d"><div class="absolute inset-0 border border-[var(--border-dim)] hover:border-[var(--accent)]/40 hover:shadow-lg transition-all duration-300" style="backface-visibility:hidden;background-color:var(--bg-primary);border-radius:16px;overflow:hidden;cursor:pointer"><div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-warm-secondary)"><svg width="96" height="96" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><rect x="6" y="22" width="36" height="14" rx="3"></rect><path d="M12 22 l4-8 h16 l4 8"></path><circle cx="14" cy="36" r="4"></circle><circle cx="34" cy="36" r="4"></circle><line x1="20" y1="14" x2="28" y2="14"></line><line x1="18" y1="28" x2="30" y2="28"></line></svg></div><div style="position:absolute;bottom:24px;left:24px"><div class="font-semibold text-lg leading-tight" style="color:var(--text-warm)">Taxi & Transport</div></div><button aria-label="Show details" style="position:absolute;bottom:16px;right:16px;width:32px;height:32px;border-radius:50%;background:#26251F;color:#FFFFFF;border:none;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
21<line x1="7" y1="0" x2="7" y2="14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line><line x1="0" y1="7" x2="14" y2="7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line></svg></button></div><div class="absolute inset-0 flex flex-col p-6 border" style="backface-visibility:hidden;transform:rotateY(180deg);background-color:var(--card-surface);border-color:var(--border);border-radius:16px"><p class="text-sm leading-relaxed flex-1" style="color:var(--text-warm-secondary)">Fahrgast zahlt bevor er aussteigt. Kein Wechselgeld, kein Kartenleser im Armaturenbrett, kein Bargeld zählen am Schichtende.</p><button aria-label="Close details" style="position:absolute;bottom:16px;right:16px;width:32px;height:32px;border-radius:50%;background:#26251F;color:#FFFFFF;border:none;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer"><svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="1" y1="1" x2="11" y2="11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line><line x1="11" y1="1" x2="1" y2="11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line></svg></button></div></div></div><div class="relative flex-shrink-0" style="width:352px;height:320px;perspective:1000px"><div class="relative w-full h-full" style="transform-style:preserve-3d"><div class="absolute inset-0 border border-[var(--border-dim)] hover:border-[var(--accent)]/40 hover:shadow-lg transition-all duration-300" style="backface-visibility:hidden;background-color:var(--bg-primary);border-radius:16px;overflow:hidden;cursor:pointer"><div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-warm-secondary)"><svg width="96" height="96" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><ellipse cx="24" cy="30" rx="12" ry="6"></ellipse><path d="M12 30 v-8 c0-4 12-8 12-8 s12 4 12 8 v8"></path><path d="M18 14 c0-4 2-6 6-6 s6 2 6 6"></path><line x1="24" y1="8" x2="24" y2="14"></line></svg></div><div style="position:absolute;bottom:24px;left:24px"><div class="font-semibold text-lg leading-tight" style="color:var(--text-warm)">Kunsthandwerk</div></div><button aria-label="Show details" style="position:absolute;bottom:16px;right:16px;width:32px;height:32px;border-radius:50%;background:#26251F;color:#FFFFFF;border:none;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="7" y1="0" x2="7" y2="14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line><line x1="0" y1="7" x2="14" y2="7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line></svg></button></div><div class="absolute inset-0 flex flex-col p-6 border" style="backface-visibility:hidden;transform:rotateY(180deg);background-color:var(--card-surface);border-color:var(--border);border-radius:16px"><p class="text-sm leading-relaxed flex-1" style="color:var(--text-warm-secondary)">Märkte, Pop-ups, Messen. Keine Hardware, kein WLAN nötig. Wo auch immer du aufbaust, bist du bereit, Zahlungen anzunehmen.</p><button aria-label="Close details" style="position:absolute;bottom:16px;right:16px;width:32px;height:32px;border-radius:50%;background:#26251F;color:#FFFFFF;border:none;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer"><svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="1" y1="1" x2="11" y2="11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line><line x1="11" y1="1" x2="1" y2="11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line></svg></button></div></div></div><div class="relative flex-shrink-0" style="width:352px;height:320px;perspective:1000px"><div class="relative w-full h-full" style="transform-style:preserve-3d"><div class="absolute inset-0 border border-[var(--border-dim)] hover:border-[var(--accent)]/40 hover:shadow-lg transition-all duration-300" style="backface-visibility:hidden;background-color:var(--bg-primary);border-radius:16px;overflow:hidden;cursor:pointer"><div style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--text-warm-secondary)"><svg width="96" height="96" viewBox="0 0 48 48" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" xmlns="http://www.w3.org/2000/svg"><rect x="8" y="10" width="32" height="22" rx="3"></rect><line x1="16" y1="38" x2="32" y2="38"></line><line x1="22" y1="32" x2="26" y2="38"></line><line x1="8" y1="26" x2="40" y2="26"></line><path d="M24 10 v16"></path></svg></div><div style="position:absolute;bottom:24px;left:24px"><div class="font-semibold text-lg leading-tight" style="color:var(--text-warm)">Digital & Online</div></div><button aria-label="Show details" style="position:absolute;bottom:16px;right:16px;width:32px;height:32px;border-radius:50%;background:#26251F;color:#FFFFFF;border:none;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer"><svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
21<line x1="7" y1="0" x2="7" y2="14" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line><line x1="0" y1="7" x2="14" y2="7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line></svg></button></div><div class="absolute inset-0 flex flex-col p-6 border" style="backface-visibility:hidden;transform:rotateY(180deg);background-color:var(--card-surface);border-color:var(--border);border-radius:16px"><p class="text-sm leading-relaxed flex-1" style="color:var(--text-warm-secondary)">Zahlungslink senden. Sofort bezahlt werden. Kein Nachjagen von Rechnungen, kein Plattformabzug, kein tagelanger Warten auf Auszahlung. Wiederkehrende Abrechnung integriert für Abonnements.</p><button aria-label="Close details" style="position:absolute;bottom:16px;right:16px;width:32px;height:32px;border-radius:50%;background:#26251F;color:#FFFFFF;border:none;display:flex;align-items:center;justify-content:center;padding:0;cursor:pointer"><svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><line x1="1" y1="1" x2="11" y2="11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line><line x1="11" y1="1" x2="1" y2="11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></line></svg></button></div></div></div></div></div><button aria-label="Scroll right" class="hidden md:flex" style="position:absolute;top:50%;transform:translateY(-50%);z-index:3;right:12px;width:36px;height:36px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,0.12);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;color:var(--text-primary)">âº</button></div></div></section><section class="w-full flex flex-col px-5 md:px-[20%] max-w-[1920px] mx-auto py-32 min-h-0 h-auto pt-12 pb-32 justify-start"><div class="w-full p-8 rounded-lg border border-[var(--border-dim)]" style="background-color:var(--card-surface)"><div class="text-2xl font-bold mb-2" style="color:var(--text-warm)">Kostenlos starten. Für immer kostenlos bei Zahlungen.</div><p class="text-sm leading-relaxed mb-4" style="color:var(--text-warm-secondary)">Premium-Funktionen für Unternehmen, die mehr wollen: vollständige Kasse, DATEV-Export, Personalrollen und Steuerintegration. Eine pauschale monatliche Gebühr.</p><a class="text-sm font-semibold hover:underline" style="color:#E25B28" href="/plans">Alle Pläne ansehen â</a></div></section><section class="w-full flex flex-col justify-center px-5 md:px-[20%] max-w-[1920px] mx-auto min-h-0 h-auto py-32 overflow-hidden"><div class="w-full flex flex-col gap-10" style="opacity:0;transform:translateY(40px)"><div class="text-center"><h2 class="font-medium tracking-tight" style="font-size:clamp(2rem, 3.5vw, 3.2rem);line-height:1.15;color:var(--text-warm)">Die Händler, die alles andere ausprobiert haben, haben sich dafür entschieden.</h2></div><div style="position:relative;overflow:hidden;width:100vw;left:50%;transform:translateX(-50%)"><div aria-hidden="true" style="position:absolute;top:0;bottom:0;left:0;width:80px;z-index:2;pointer-events:none;background:linear-gradient(to right, var(--bg-primary) 0%, transparent 100%)"></div><div aria-hidden="true" style="position:absolute;top:0;bottom:0;right:0;width:80px;z-index:2;pointer-events:none;background:linear-gradient(to left, var(--bg-primary) 0%, transparent 100%)"></div><button aria-label="Scroll left" class="hidden md:flex" style="position:absolute;top:50%;transform:translateY(-50%);z-index:3;left:12px;width:36px;height:36px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,0.12);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;color:var(--text-primary)">â¹</button><div style="overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none"><div style="display:flex;gap:20px;width:max-content;padding:24px 60px"><div class="flex-shrink-0 w-[22rem] p-6 rounded-xl border border-[var(--border-dim)] flex flex-col gap-4 hover:border-[var(--accent)]/40 hover:shadow-lg transition-all duration-300" style="background-color:var(--card-surface)"><div class="flex items-start justify-between gap-3"><div class="w-10 h-10 rounded-lg bg-[var(--accent)]/10 flex items-center justify-center text-xl flex-shrink-0">ð¥</div><span class="text-xs font-semibold text-[var(--accent)] bg-[var(--accent)]/10 px-2 py-0.5 rounded-md flex-shrink-0">Gebühren</span></div><blockquote class="leading-relaxed flex-1" style="font-size:clamp(0.9rem, 1vw, 1rem);color:var(--text-warm-secondary)">â<!-- -->Ein Brötchen für 2,50 ⬠mit Kartengebühr obendrauf. Deshalb haben wir immer auf Bargeld bestanden. ZYSYGY ist die erste Lösung, bei der die Zahlen für kleine Beträge wirklich Sinn ergeben. Deshalb bin ich dabei.<!-- -->â</blockquote><div class="border-t border-[var(--border-dim)] pt-4"><div class="font-semibold text-sm" style="color:var(--text-warm)">Thomas H.</div><div class="text-xs" style="color:var(--text-warm-secondary)">Bakery owner</div></div></div><div class="flex-shrink-0 w-[22rem] p-6 rounded-xl border border-[var(--border-dim)] flex flex-col gap-4 hover:border-[var(--accent)]/40 hover:shadow-lg transition-all duration-300" style="background-color:var(--card-surface)"><div class="flex items-start justify-between gap-3"><div class="w-10 h-10 rounded-lg bg-[var(--accent)]/10 flex items-center justify-center text-xl flex-shrink-0">ð¯</div><span class="text-xs font-semibold text-[var(--accent)] bg-[var(--accent)]/10 px-2 py-0.5 rounded-md flex-shrink-0">Keine Hardware</span></div><blockquote class="leading-relaxed flex-1" style="font-size:clamp(0.9rem, 1vw, 1rem);color:var(--text-warm-secondary)">â<!-- -->Jede andere Lösung wollte, dass ich ein Terminal kaufe oder miete. ZYSYGY funktioniert auf dem Smartphone, das ich bereits habe. Ich habe jahrelang auf so etwas gewartet.<!-- -->â</blockquote><div class="border-t border-[var(--border-dim)] pt-4"><div class="font-semibold text-sm" style="color:var(--text-warm)">Mehmet Y.</div><div class="text-xs" style="color:var(--text-warm-secondary)">Döner shop owner</div></div></div><div class="flex-shrink-0 w-[22rem] p-6 rounded-xl border border-[var(--border-dim)] flex flex-col gap-4 hover:border-[var(--accent)]/40 hover:shadow-lg transition-all duration-300" style="background-color:var(--card-surface)"><div class="flex items-start justify-between gap-3"><div class="w-10 h-10 rounded-lg bg-[var(--accent)]/10 flex items-center justify-center text-xl flex-shrink-0">âï¸</div><span class="text-xs font-semibold text-[var(--accent)] bg-[var(--accent)]/10 px-2 py-0.5 rounded-md flex-shrink-0">Einfache Einrichtung</span></div><blockquote class="leading-relaxed flex-1" style="font-size:clamp(0.9rem, 1vw, 1rem);color:var(--text-warm-secondary)">â<!-- -->Kein Vertrag. Keine Installation. Kein Verkäufer an meiner Tür. Ich habe mich in zwei Minuten auf die Warteliste eingetragen. Das allein hat mir gezeigt, dass das anders gemacht ist.<!-- -->â</blockquote><div class="border-t border-[var(--border-dim)] pt-4"><div class="font-semibold text-sm" style="color:var(--text-warm)">Anna M.</div><div class="text-xs" style="color:var(--text-warm-secondary)">Salon owner</div></div></div><div class="flex-shrink-0 w-[22rem] p-6 rounded-xl border border-[var(--border-dim)] flex flex-col gap-4 hover:border-[var(--accent)]/40 hover:shadow-lg transition-all duration-300" style="background-color:var(--card-surface)"><div class="flex items-start justify-between gap-3"><div class="w-10 h-10 rounded-lg bg-[var(--accent)]/10 flex items-center justify-center text-xl flex-shrink-0">ð§</div><span class="text-xs font-semibold text-[var(--accent)] bg-[var(--accent)]/10 px-2 py-0.5 rounded-md flex-shrink-0">Schnelligkeit</span></div><blockquote class="leading-relaxed flex-1" style="font-size:clamp(0.9rem, 1vw, 1rem);color:var(--text-warm-secondary)">â<!-- -->Auf dem Markt hat man keine Zeit, bis zum nächsten Tag auf Abrechnungen zu warten. Das Versprechen der sofortigen Abrechnung war genau das, was mich überzeugt hat. Ich habe jahrelang Kunden ohne Bargeld verloren. Nicht mehr.<!-- -->â</blockquote><div class="border-t border-[var(--border-dim)] pt-4"><div class="font-semibold text-sm" style="color:var(--text-warm)">Lukas W.</div><div class="text-xs" style="color:var(--text-warm-secondary)">Market vendor</div></div></div><div class="flex-shrink-0 w-[22rem] p-6 rounded-xl border border-[var(--border-dim)] flex flex-col gap-4 hover:border-[var(--accent)]/40 hover:shadow-lg transition-all duration-300" style="background-color:var(--card-surface)"><div class="flex items-start justify-between gap-3"><div class="w-10 h-10 rounded-lg bg-[var(--accent)]/10 flex items-center justify-center text-xl flex-shrink-0">â¡</div><span class="text-xs font-semibold text-[var(--accent)] bg-[var(--accent)]/10 px-2 py-0.5 rounded-md flex-shrink-0">Unterwegs</span></div><blockquote class="leading-relaxed flex-1" style="font-size:clamp(0.9rem, 1vw, 1rem);color:var(--text-warm-secondary)">â<!-- -->Ich bin den ganzen Tag unterwegs. Eine Zahlungslösung, die von meinem Smartphone funktioniert, ohne etwas tragen oder einrichten zu müssen. Das ist für mich kein Nice-to-have. Das ist der einzige Weg, wie es funktioniert.<!-- -->â</blockquote><div class="border-t border-[var(--border-dim)] pt-4"><div class="font-semibold text-sm" style="color:var(--text-warm)">Stefan F.</div><div class="text-xs" style="color:var(--text-warm-secondary)">Elektriker</div></div></div><div class="flex-shrink-0 w-[22rem] p-6 rounded-xl border border-[var(--border-dim)] flex flex-col gap-4 hover:border-[var(--accent)]/40 hover:shadow-lg transition-all duration-300" style="background-color:var(--card-surface)"><div class="flex items-start justify-between gap-3"><div class="w-10 h-10 rounded-lg bg-[var(--accent)]/10 flex items-center justify-center text-xl flex-shrink-0">â</div><span class="text-xs font-semibold text-[var(--accent)] bg-[var(--accent)]/10 px-2 py-0.5 rounded-md flex-shrink-0">Service</span></div><blockquote class="leading-relaxed flex-1" style="font-size:clamp(0.9rem, 1vw, 1rem);color:var(--text-warm-secondary)">â<!-- -->Die meisten Zahlungsanbieter haben eine Hotline, die einen 40 Minuten warten lässt. ZYSYGY hat mich persönlich kontaktiert, als ich mich auf die Warteliste eingetragen habe. Diese Art von Aufmerksamkeit, bevor das Produkt überhaupt live ist. Das ist selten.<!-- -->â</blockquote><div class="border-t border-[var(--border-dim)] pt-4"><div class="font-semibold text-sm" style="color:var(--text-warm)">
21Sarah S.</div><div class="text-xs" style="color:var(--text-warm-secondary)">Café owner</div></div></div><div class="flex-shrink-0 w-[22rem] p-6 rounded-xl border border-[var(--border-dim)] flex flex-col gap-4 hover:border-[var(--accent)]/40 hover:shadow-lg transition-all duration-300" style="background-color:var(--card-surface)"><div class="flex items-start justify-between gap-3"><div class="w-10 h-10 rounded-lg bg-[var(--accent)]/10 flex items-center justify-center text-xl flex-shrink-0">ð¥</div><span class="text-xs font-semibold text-[var(--accent)] bg-[var(--accent)]/10 px-2 py-0.5 rounded-md flex-shrink-0">Gebühren</span></div><blockquote class="leading-relaxed flex-1" style="font-size:clamp(0.9rem, 1vw, 1rem);color:var(--text-warm-secondary)">â<!-- -->Ein Brötchen für 2,50 ⬠mit Kartengebühr obendrauf. Deshalb haben wir immer auf Bargeld bestanden. ZYSYGY ist die erste Lösung, bei der die Zahlen für kleine Beträge wirklich Sinn ergeben. Deshalb bin ich dabei.<!-- -->â</blockquote><div class="border-t border-[var(--border-dim)] pt-4"><div class="font-semibold text-sm" style="color:var(--text-warm)">Thomas H.</div><div class="text-xs" style="color:var(--text-warm-secondary)">Bakery owner</div></div></div><div class="flex-shrink-0 w-[22rem] p-6 rounded-xl border border-[var(--border-dim)] flex flex-col gap-4 hover:border-[var(--accent)]/40 hover:shadow-lg transition-all duration-300" style="background-color:var(--card-surface)"><div class="flex items-start justify-between gap-3"><div class="w-10 h-10 rounded-lg bg-[var(--accent)]/10 flex items-center justify-center text-xl flex-shrink-0">ð¯</div><span class="text-xs font-semibold text-[var(--accent)] bg-[var(--accent)]/10 px-2 py-0.5 rounded-md flex-shrink-0">Keine Hardware</span></div><blockquote class="leading-relaxed flex-1" style="font-size:clamp(0.9rem, 1vw, 1rem);color:var(--text-warm-secondary)">â<!-- -->Jede andere Lösung wollte, dass ich ein Terminal kaufe oder miete. ZYSYGY funktioniert auf dem Smartphone, das ich bereits habe. Ich habe jahrelang auf so etwas gewartet.<!-- -->â</blockquote><div class="border-t border-[var(--border-dim)] pt-4"><div class="font-semibold text-sm" style="color:var(--text-warm)">Mehmet Y.</div><div class="text-xs" style="color:var(--text-warm-secondary)">Döner shop owner</div></div></div><div class="flex-shrink-0 w-[22rem] p-6 rounded-xl border border-[var(--border-dim)] flex flex-col gap-4 hover:border-[var(--accent)]/40 hover:shadow-lg transition-all duration-300" style="background-color:var(--card-surface)"><div class="flex items-start justify-between gap-3"><div class="w-10 h-10 rounded-lg bg-[var(--accent)]/10 flex items-center justify-center text-xl flex-shrink-0">âï¸</div><span class="text-xs font-semibold text-[var(--accent)] bg-[var(--accent)]/10 px-2 py-0.5 rounded-md flex-shrink-0">Einfache Einrichtung</span></div><blockquote class="leading-relaxed flex-1" style="font-size:clamp(0.9rem, 1vw, 1rem);color:var(--text-warm-secondary)">â<!-- -->Kein Vertrag. Keine Installation. Kein Verkäufer an meiner Tür. Ich habe mich in zwei Minuten auf die Warteliste eingetragen. Das allein hat mir gezeigt, dass das anders gemacht ist.<!-- -->â</blockquote><div class="border-t border-[var(--border-dim)] pt-4"><div class="font-semibold text-sm" style="color:var(--text-warm)">Anna M.</div><div class="text-xs" style="color:var(--text-warm-secondary)">Salon owner</div></div></div><div class="flex-shrink-0 w-[22rem] p-6 rounded-xl border border-[var(--border-dim)] flex flex-col gap-4 hover:border-[var(--accent)]/40 hover:shadow-lg transition-all duration-300" style="background-color:var(--card-surface)"><div class="flex items-start justify-between gap-3"><div class="w-10 h-10 rounded-lg bg-[var(--accent)]/10 flex items-center justify-center text-xl flex-shrink-0">ð§</div><span class="text-xs font-semibold text-[var(--accent)] bg-[var(--accent)]/10 px-2 py-0.5 rounded-md flex-shrink-0">Schnelligkeit</span></div><blockquote class="leading-relaxed flex-1" style="font-size:clamp(0.9rem, 1vw, 1rem);color:var(--text-warm-secondary)">â<!-- -->Auf dem Markt hat man keine Zeit, bis zum nächsten Tag auf Abrechnungen zu warten. Das Versprechen der sofortigen Abrechnung war genau das, was mich überzeugt hat. Ich habe jahrelang Kunden ohne Bargeld verloren. Nicht mehr.<!-- -->â</blockquote><div class="border-t border-[var(--border-dim)] pt-4"><div class="font-semibold text-sm" style="color:var(--text-warm)">Lukas W.</div><div class="text-xs" style="color:var(--text-warm-secondary)">Market vendor</div></div></div><div class="flex-shrink-0 w-[22rem] p-6 rounded-xl border border-[var(--border-dim)] flex flex-col gap-4 hover:border-[var(--accent)]/40 hover:shadow-lg transition-all duration-300" style="background-color:var(--card-surface)"><div class="flex items-start justify-between gap-3"><div class="w-10 h-10 rounded-lg bg-[var(--accent)]/10 flex items-center justify-center text-xl flex-shrink-0">â¡</div><span class="text-xs font-semibold text-[var(--accent)] bg-[var(--accent)]/10 px-2 py-0.5 rounded-md flex-shrink-0">Unterwegs</span></div><blockquote class="leading-relaxed flex-1" style="font-size:clamp(0.9rem, 1vw, 1rem);color:var(--text-warm-secondary)">â<!-- -->Ich bin den ganzen Tag unterwegs. Eine Zahlungslösung, die von meinem Smartphone funktioniert, ohne etwas tragen oder einrichten zu müssen. Das ist für mich kein Nice-to-have. Das ist der einzige Weg, wie es funktioniert.<!-- -->â</blockquote><div class="border-t border-[var(--border-dim)] pt-4"><div class="font-semibold text-sm" style="color:var(--text-warm)">Stefan F.</div><div class="text-xs" style="color:var(--text-warm-secondary)">Elektriker</div></div></div><div class="flex-shrink-0 w-[22rem] p-6 rounded-xl border border-[var(--border-dim)] flex flex-col gap-4 hover:border-[var(--accent)]/40 hover:shadow-lg transition-all duration-300" style="background-color:var(--card-surface)"><div class="flex items-start justify-between gap-3"><div class="w-10 h-10 rounded-lg bg-[var(--accent)]/10 flex items-center justify-center text-xl flex-shrink-0">â</div><span class="text-xs font-semibold text-[var(--accent)] bg-[var(--accent)]/10 px-2 py-0.5 rounded-md flex-shrink-0">Service</span></div><blockquote class="leading-relaxed flex-1" style="font-size:clamp(0.9rem, 1vw, 1rem);color:var(--text-warm-secondary)">â<!-- -->Die meisten Zahlungsanbieter haben eine Hotline, die einen 40 Minuten warten lässt. ZYSYGY hat mich persönlich kontaktiert, als ich mich auf die Warteliste eingetragen habe. Diese Art von Aufmerksamkeit, bevor das Produkt überhaupt live ist. Das ist selten.<!-- -->â</blockquote><div class="border-t border-[var(--border-dim)] pt-4"><div class="font-semibold text-sm" style="color:var(--text-warm)">
21Sarah S.</div><div class="text-xs" style="color:var(--text-warm-secondary)">Café owner</div></div></div><div class="flex-shrink-0 w-[22rem] p-6 rounded-xl border border-[var(--border-dim)] flex flex-col gap-4 hover:border-[var(--accent)]/40 hover:shadow-lg transition-all duration-300" style="background-color:var(--card-surface)"><div class="flex items-start justify-between gap-3"><div class="w-10 h-10 rounded-lg bg-[var(--accent)]/10 flex items-center justify-center text-xl flex-shrink-0">ð¥</div><span class="text-xs font-semibold text-[var(--accent)] bg-[var(--accent)]/10 px-2 py-0.5 rounded-md flex-shrink-0">Gebühren</span></div><blockquote class="leading-relaxed flex-1" style="font-size:clamp(0.9rem, 1vw, 1rem);color:var(--text-warm-secondary)">â<!-- -->Ein Brötchen für 2,50 ⬠mit Kartengebühr obendrauf. Deshalb haben wir immer auf Bargeld bestanden. ZYSYGY ist die erste Lösung, bei der die Zahlen für kleine Beträge wirklich Sinn ergeben. Deshalb bin ich dabei.<!-- -->â</blockquote><div class="border-t border-[var(--border-dim)] pt-4"><div class="font-semibold text-sm" style="color:var(--text-warm)">Thomas H.</div><div class="text-xs" style="color:var(--text-warm-secondary)">Bakery owner</div></div></div><div class="flex-shrink-0 w-[22rem] p-6 rounded-xl border border-[var(--border-dim)] flex flex-col gap-4 hover:border-[var(--accent)]/40 hover:shadow-lg transition-all duration-300" style="background-color:var(--card-surface)"><div class="flex items-start justify-between gap-3"><div class="w-10 h-10 rounded-lg bg-[var(--accent)]/10 flex items-center justify-center text-xl flex-shrink-0">ð¯</div><span class="text-xs font-semibold text-[var(--accent)] bg-[var(--accent)]/10 px-2 py-0.5 rounded-md flex-shrink-0">Keine Hardware</span></div><blockquote class="leading-relaxed flex-1" style="font-size:clamp(0.9rem, 1vw, 1rem);color:var(--text-warm-secondary)">â<!-- -->Jede andere Lösung wollte, dass ich ein Terminal kaufe oder miete. ZYSYGY funktioniert auf dem Smartphone, das ich bereits habe. Ich habe jahrelang auf so etwas gewartet.<!-- -->â</blockquote><div class="border-t border-[var(--border-dim)] pt-4"><div class="font-semibold text-sm" style="color:var(--text-warm)">Mehmet Y.</div><div class="text-xs" style="color:var(--text-warm-secondary)">Döner shop owner</div></div></div><div class="flex-shrink-0 w-[22rem] p-6 rounded-xl border border-[var(--border-dim)] flex flex-col gap-4 hover:border-[var(--accent)]/40 hover:shadow-lg transition-all duration-300" style="background-color:var(--card-surface)"><div class="flex items-start justify-between gap-3"><div class="w-10 h-10 rounded-lg bg-[var(--accent)]/10 flex items-center justify-center text-xl flex-shrink-0">âï¸</div><span class="text-xs font-semibold text-[var(--accent)] bg-[var(--accent)]/10 px-2 py-0.5 rounded-md flex-shrink-0">Einfache Einrichtung</span></div><blockquote class="leading-relaxed flex-1" style="font-size:clamp(0.9rem, 1vw, 1rem);color:var(--text-warm-secondary)">â<!-- -->Kein Vertrag. Keine Installation. Kein Verkäufer an meiner Tür. Ich habe mich in zwei Minuten auf die Warteliste eingetragen. Das allein hat mir gezeigt, dass das anders gemacht ist.<!-- -->â</blockquote><div class="border-t border-[var(--border-dim)] pt-4"><div class="font-semibold text-sm" style="color:var(--text-warm)">Anna M.</div><div class="text-xs" style="color:var(--text-warm-secondary)">Salon owner</div></div></div><div class="flex-shrink-0 w-[22rem] p-6 rounded-xl border border-[var(--border-dim)] flex flex-col gap-4 hover:border-[var(--accent)]/40 hover:shadow-lg transition-all duration-300" style="background-color:var(--card-surface)"><div class="flex items-start justify-between gap-3"><div class="w-10 h-10 rounded-lg bg-[var(--accent)]/10 flex items-center justify-center text-xl flex-shrink-0">ð§</div><span class="text-xs font-semibold text-[var(--accent)] bg-[var(--accent)]/10 px-2 py-0.5 rounded-md flex-shrink-0">Schnelligkeit</span></div><blockquote class="leading-relaxed flex-1" style="font-size:clamp(0.9rem, 1vw, 1rem);color:var(--text-warm-secondary)">â<!-- -->Auf dem Markt hat man keine Zeit, bis zum nächsten Tag auf Abrechnungen zu warten. Das Versprechen der sofortigen Abrechnung war genau das, was mich überzeugt hat. Ich habe jahrelang Kunden ohne Bargeld verloren. Nicht mehr.<!-- -->â</blockquote><div class="border-t border-[var(--border-dim)] pt-4"><div class="font-semibold text-sm" style="color:var(--text-warm)">Lukas W.</div><div class="text-xs" style="color:var(--text-warm-secondary)">Market vendor</div></div></div><div class="flex-shrink-0 w-[22rem] p-6 rounded-xl border border-[var(--border-dim)] flex flex-col gap-4 hover:border-[var(--accent)]/40 hover:shadow-lg transition-all duration-300" style="background-color:var(--card-surface)"><div class="flex items-start justify-between gap-3"><div class="w-10 h-10 rounded-lg bg-[var(--accent)]/10 flex items-center justify-center text-xl flex-shrink-0">â¡</div><span class="text-xs font-semibold text-[var(--accent)] bg-[var(--accent)]/10 px-2 py-0.5 rounded-md flex-shrink-0">Unterwegs</span></div><blockquote class="leading-relaxed flex-1" style="font-size:clamp(0.9rem, 1vw, 1rem);color:var(--text-warm-secondary)">â<!-- -->Ich bin den ganzen Tag unterwegs. Eine Zahlungslösung, die von meinem Smartphone funktioniert, ohne etwas tragen oder einrichten zu müssen. Das ist für mich kein Nice-to-have. Das ist der einzige Weg, wie es funktioniert.<!-- -->â</blockquote><div class="border-t border-[var(--border-dim)] pt-4"><div class="font-semibold text-sm" style="color:var(--text-warm)">Stefan F.</div><div class="text-xs" style="color:var(--text-warm-secondary)">Elektriker</div></div></div><div class="flex-shrink-0 w-[22rem] p-6 rounded-xl border border-[var(--border-dim)] flex flex-col gap-4 hover:border-[var(--accent)]/40 hover:shadow-lg transition-all duration-300" style="background-color:var(--card-surface)"><div class="flex items-start justify-between gap-3"><div class="w-10 h-10 rounded-lg bg-[var(--accent)]/10 flex items-center justify-center text-xl flex-shrink-0">â</div><span class="text-xs font-semibold text-[var(--accent)] bg-[var(--accent)]/10 px-2 py-0.5 rounded-md flex-shrink-0">Service</span></div><blockquote class="leading-relaxed flex-1" style="font-size:clamp(0.9rem, 1vw, 1rem);color:var(--text-warm-secondary)">â<!-- -->Die meisten Zahlungsanbieter haben eine Hotline, die einen 40 Minuten warten lässt. ZYSYGY hat mich persönlich kontaktiert, als ich mich auf die Warteliste eingetragen habe. Diese Art von Aufmerksamkeit, bevor das Produkt überhaupt live ist. Das ist selten.<!-- -->â</blockquote><div class="border-t border-[var(--border-dim)] pt-4"><div class="font-semibold text-sm" style="color:var(--text-warm)">
21Sarah S.</div><div class="text-xs" style="color:var(--text-warm-secondary)">Café owner</div></div></div></div></div><button aria-label="Scroll right" class="hidden md:flex" style="position:absolute;top:50%;transform:translateY(-50%);z-index:3;right:12px;width:36px;height:36px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);box-shadow:0 2px 8px rgba(0,0,0,0.12);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;line-height:1;color:var(--text-primary)">âº</button></div><div class="flex flex-col items-center text-center gap-6 px-4 pt-4 pb-2"><h2 class="font-medium tracking-tight" style="font-size:clamp(1.55rem, 2.2vw, 2.1rem);line-height:1.2;color:var(--text-warm)">Wir bauen das für dich.</h2><p style="font-size:clamp(1rem, 1.5vw, 1.2rem);max-width:38rem;line-height:1.6;color:var(--text-warm-secondary)">Zahlungen in Deutschland sind für kleine Unternehmen kaputt. Zu teuer, zu kompliziert, zu viel Hardware. Wir ändern das. Trage dich auf die Warteliste ein und hilf uns, etwas zu bauen, das wirklich funktioniert.</p><button class="px-5 h-10 rounded-md font-semibold text-sm hover:opacity-80 active:scale-95 transition-all whitespace-nowrap border border-[var(--btn-primary-border)]" style="background-color:var(--btn-primary-bg);color:#E25B28">Warteliste beitreten</button></div></div></section><section class="w-full flex flex-col justify-center px-5 md:px-[20%] max-w-[1920px] mx-auto min-h-0 h-auto py-32"><div class="w-full flex flex-col gap-0" style="opacity:0;transform:translateY(40px)"><div class="w-full flex flex-col items-center text-center gap-4"><h2 class="font-medium tracking-tight" style="font-size:clamp(2rem, 3.5vw, 3.2rem);line-height:1.15;color:var(--text-warm)">In Deutschland gebaut. Für die Welt.</h2><p class="leading-relaxed max-w-2xl" style="font-size:clamp(1rem, 1.2vw, 1.15rem);color:var(--text-warm-secondary)">Nicht für Deutschland angepasst. Dafür gebaut. Deutsches Datenschutzrecht, deutsches Banking, deutsche Steuerkonformität von Tag eins.</p></div><div style="position:relative;width:100vw;left:50%;transform:translateX(-50%);padding:0 60px;margin-top:4rem">
21<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-5"><div class="p-6 rounded-xl border border-[var(--border-dim)] flex flex-col gap-4 hover:border-[var(--accent)]/40 transition-colors min-h-[320px]" style="background-color:var(--card-surface);opacity:0;transform:translateY(20px)"><div class="w-12 h-12 rounded-lg bg-[var(--accent)]/15 flex items-center justify-center text-2xl">ð</div><h3 class="font-semibold text-xl" style="color:var(--text-warm)">Datenschutz</h3><p class="leading-relaxed text-sm flex-1" style="color:var(--text-warm-secondary)">Deine Zahlungsdaten werden auf deutschen Servern verarbeitet und gespeichert. Punkt. Wir verkaufen sie nicht, teilen sie nicht und nutzen sie nicht für Werbung. Sie gehören dir.</p></div><div class="p-6 rounded-xl border border-[var(--border-dim)] flex flex-col gap-4 hover:border-[var(--accent)]/40 transition-colors min-h-[320px]" style="background-color:var(--card-surface);opacity:0;transform:translateY(20px)"><div class="w-12 h-12 rounded-lg bg-[var(--accent)]/15 flex items-center justify-center text-2xl">ð¡ï¸</div><h3 class="font-semibold text-xl" style="color:var(--text-warm)">Mastercard und Visa sind amerikanische Unternehmen. SEPA nicht.</h3><p class="leading-relaxed text-sm flex-1" style="color:var(--text-warm-secondary)">Kartenzahlungen laufen über US-Netzwerke, unterliegen amerikanischem Recht. ZYSYGY bewegt Geld direkt zwischen deutschen Bankkonten. Kein ausländischer Vermittler.</p></div><div class="p-6 rounded-xl border border-[var(--border-dim)] flex flex-col gap-4 hover:border-[var(--accent)]/40 transition-colors min-h-[320px]" style="background-color:var(--card-surface);opacity:0;transform:translateY(20px)"><div class="w-12 h-12 rounded-lg bg-[var(--accent)]/15 flex items-center justify-center text-2xl">ðï¸</div><h3 class="font-semibold text-xl" style="color:var(--text-warm)">Kommendes Gesetz</h3><p class="leading-relaxed text-sm flex-1" style="color:var(--text-warm-secondary)">Die neue Bundesregierung hat sich verpflichtet, jeden Betrieb zur Annahme digitaler Zahlungen zu verpflichten. Das Gesetz ist noch nicht endgültig. Aber die Richtung ist klar. ZYSYGY kostet nichts in der Einrichtung. Es gibt keinen Grund zu warten, bis es soweit ist.</p></div><div class="p-6 rounded-xl border border-[var(--border-dim)] flex flex-col gap-4 hover:border-[var(--accent)]/40 transition-colors min-h-[320px]" style="background-color:var(--card-surface);opacity:0;transform:translateY(20px)"><div class="w-12 h-12 rounded-lg bg-[var(--accent)]/15 flex items-center justify-center text-2xl">ð</div><h3 class="font-semibold text-xl" style="color:var(--text-warm)">KassenSichV & DATEV-bereit.</h3><p class="leading-relaxed text-sm flex-1" style="color:var(--text-warm-secondary)">Jede Transaktion protokolliert, mit Zeitstempel versehen und im DATEV-Format exportierbar. KassenSichV-konforme Belege via Fiskaltrust. Dein Kassenbuch ist fertig, bevor dein Steuerberater danach fragt.</p></div></div></div></div></section><section class="w-full flex flex-col justify-center px-5 md:px-[20%] max-w-[1920px] mx-auto min-h-0 h-auto py-32"><div class="w-full flex flex-col gap-10" style="opacity:0;transform:translateY(40px)"><div><h2 class="font-medium tracking-tight mb-2" style="font-size:clamp(2rem, 3.5vw, 3.2rem);line-height:1.15;color:var(--text-warm)">Fragen? Gut.</h2></div><div class="w-full max-w-3xl flex flex-col"><div class="border-b border-[var(--border-dim)] last:border-0" style="opacity:0;transform:translateY(12px)"><button class="w-full flex items-start justify-between gap-6 py-5 text-left group"><span class="font-medium group-hover:text-[var(--accent)] transition-colors" style="color:var(--text-warm);font-size:clamp(0.95rem, 1.1vw, 1.1rem)">Was genau ist ZYSYGY?</span><span class="text-[var(--text-secondary)] text-2xl leading-none flex-shrink-0 mt-0.5">+</span></button></div><div class="border-b border-[var(--border-dim)] last:border-0" style="opacity:0;transform:translateY(12px)"><button class="w-full flex items-start justify-between gap-6 py-5 text-left group"><span class="font-medium group-hover:text-[var(--accent)] transition-colors" style="color:var(--text-warm);font-size:clamp(0.95rem, 1.1vw, 1.1rem)">Wie kann ZYSYGY null Transaktionsgebühren erheben? Was ist der Haken?</sp
21an><span class="text-[var(--text-secondary)] text-2xl leading-none flex-shrink-0 mt-0.5">+</span></button></div><div class="border-b border-[var(--border-dim)] last:border-0" style="opacity:0;transform:translateY(12px)"><button class="w-full flex items-start justify-between gap-6 py-5 text-left group"><span class="font-medium group-hover:text-[var(--accent)] transition-colors" style="color:var(--text-warm);font-size:clamp(0.95rem, 1.1vw, 1.1rem)">Wie bewegt ZYSYGY tatsächlich Geld ohne Kartennetzwerkgebühren?</span><span class="text-[var(--text-secondary)] text-2xl leading-none flex-shrink-0 mt-0.5">+</span></button></div><div class="border-b border-[var(--border-dim)] last:border-0" style="opacity:0;transform:translateY(12px)"><button class="w-full flex items-start justify-between gap-6 py-5 text-left group"><span class="font-medium group-hover:text-[var(--accent)] transition-colors" style="color:var(--text-warm);font-size:clamp(0.95rem, 1.1vw, 1.1rem)">Wie bezahlt ein Kunde tatsächlich?</span><span class="text-[var(--text-secondary)] text-2xl leading-none flex-shrink-0 mt-0.5">+</span></button></div><div class="border-b border-[var(--border-dim)] last:border-0" style="opacity:0;transform:translateY(12px)"><button class="w-full flex items-start justify-between gap-6 py-5 text-left group"><span class="font-medium group-hover:text-[var(--accent)] transition-colors" style="color:var(--text-warm);font-size:clamp(0.95rem, 1.1vw, 1.1rem)">Wie schnell erhalte ich das Geld?</span><span class="text-[var(--text-secondary)] text-2xl leading-none flex-shrink-0 mt-0.5">+</span></button></div><div class="border-b border-[var(--border-dim)] last:border-0" style="opacity:0;transform:translateY(12px)"><button class="w-full flex items-start justify-between gap-6 py-5 text-left group"><span class="font-medium group-hover:text-[var(--accent)] transition-colors" style="color:var(--text-warm);font-size:clamp(0.95rem, 1.1vw, 1.1rem)">Muss ich Hardware kaufen?</span><span class="text-[var(--text-secondary)] text-2xl leading-none flex-shrink-0 mt-0.5">+</span></button></div><div class="border-b border-[var(--border-dim)] last:border-0" style="opacity:0;transform:translateY(12px)"><button class="w-full flex items-start justify-between gap-6 py-5 text-left group"><span class="font-medium group-hover:text-[var(--accent)] transition-colors" style="color:var(--text-warm);font-size:clamp(0.95rem, 1.1vw, 1.1rem)">Funktioniert ZYSYGY für meine Steuerbuchhaltung?</span><span class="text-[var(--text-secondary)] text-2xl leading-none flex-shrink-0 mt-0.5">+</span></button></div><div class="border-b border-[var(--border-dim)] last:border-0" style="opacity:0;transform:translateY(12px)"><button class="w-full flex items-start justify-between gap-6 py-5 text-left group"><span class="font-medium group-hover:text-[var(--accent)] transition-colors" style="color:var(--text-warm);font-size:clamp(0.95rem, 1.1vw, 1.1rem)">Sind die Zahlungsdaten meiner Kunden sicher?</span><span class="text-[var(--text-secondary)] text-2xl leading-none flex-shrink-0 mt-0.5">+</span></button></div><div class="border-b border-[var(--border-dim)] last:border-0" style="opacity:0;transform:translateY(12px)"><button class="w-full flex items-start justify-between gap-6 py-5 text-left group"><span class="font-medium group-hover:text-[var(--accent)] transition-colors" style="color:var(--text-warm);font-size:clamp(0.95rem, 1.1vw, 1.1rem)">Was kostet ZYSYGY?</span><span class="text-[var(--text-secondary)] text-2xl leading-none flex-shrink-0 mt-0.5">+</span></button></div><div class="border-b border-[var(--border-dim)] last:border-0" style="opacity:0;transform:translateY(12px)"><button class="w-full flex items-start justify-between gap-6 py-5 text-left group"><span class="font-medium group-hover:text-[var(--accent)] transition-colors" style="color:var(--text-warm);font-size:clamp(0.95rem, 1.1vw, 1.1rem)">Kann mein Personal ZYSYGY auch nutzen?</span><span class="text-[var(--text-secondary)] text-2xl leading-none flex-shrink-0 mt-0.5">+</span></button></div><div class="border-b border-[var(--border-dim)] last:border-0" style="opacity:0;transform:translateY(12px)"><button class="w-full flex items-start justify-between gap-6 py-5 text-left group"><span class="font-medium group-hover:text-[var(--accent)] transition-colors" style="color:var(--text-warm);font-size:clamp(0.95rem, 1.1vw, 1.1rem)">Was passiert, wenn keine Internetverbindung besteht?</span><span class="text-[var(--text-secondary)] text-2xl leading-none flex-shrink-0 mt-0.5">+</span></button></div></div></div></section><section class="min-h-screen w-full flex flex-col justify-center px-5 md:px-[20%] max-w-[1920px] mx-auto py-32 items-center text-center"><h2 class="text-6xl md:text-9xl font-medium mb-12 tracking-tight" style="color:var(--text-warm)">ZYSYGY beitreten</h2><div class="h-[80px] flex items-center justify-center w-full relative z-10"><button class="px-10 py-5 rounded-md font-semibold text-xl hover:opacity-80 active:scale-95 transition-all whitespace-nowrap border border-[var(--btn-primary-border)]" style="background-color:var(--btn-primary-bg);color:#E25B28">Warteliste beitreten</button></div></section></main><!--$--><!--/$--><div class="fixed bottom-6 left-0 right-0 z-50 flex justify-center pointer-events-none"></div>
21<script src="/_next/static/chunks/aade72b73e1af1bf.js" id="_R_" async=""></script>
21<script>(self.__next_f=self.__next_f||[]).push([0])</script>
21<script>self.__next_f.push([1,"1:\"$Sreact.fragment\"\n2:I[4173,[\"/_next/static/chunks/b1701ff67dbbd496.js\",\"/_next/static/chunks/cb8b06f3f91e6ce0.js\",\"/_next/static/chunks/432dcb4ed9876691.js\",\"/_next/static/chunks/320bcfb5cbdf2b21.js\"],\"default\"]\n3:I[80492,[\"/_next/static/chunks/b1701ff67dbbd496.js\",\"/_next/static/chunks/cb8b06f3f91e6ce0.js\",\"/_next/static/chunks/432dcb4ed9876691.js\",\"/_next/static/chunks/320bcfb5cbdf2b21.js\"],\"default\"]\n4:I[62319,[\"/_next/static/chunks/b1701ff67dbbd496.js\",\"/_next/static/chunks/cb8b06f3f91e6ce0.js\",\"/_next/static/chunks/432dcb4ed9876691.js\",\"/_next/static/chunks/320bcfb5cbdf2b21.js\"],\"default\"]\n5:I[39756,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/e0df19a295da9e87.js\"],\"default\"]\n6:I[37457,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/e0df19a295da9e87.js\"],\"default\"]\n7:I[66987,[\"/_next/static/chunks/b1701ff67dbbd496.js\",\"/_next/static/chunks/cb8b06f3f91e6ce0.js\",\"/_next/static/chunks/432dcb4ed9876691.js\",\"/_next/static/chunks/320bcfb5cbdf2b21.js\"],\"default\"]\n8:I[59670,[\"/_next/static/chunks/b1701ff67dbbd496.js\",\"/_next/static/chunks/cb8b06f3f91e6ce0.js\",\"/_next/static/chunks/432dcb4ed9876691.js\",\"/_next/static/chunks/320bcfb5cbdf2b21.js\"],\"BackToTopButton\"]\n9:I[47257,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/e0df19a295da9e87.js\"],\"ClientPageRoot\"]\na:I[31713,[\"/_next/static/chunks/b1701ff67dbbd496.js\",\"/_next/static/chunks/cb8b06f3f91e6ce0.js\",\"/_next/static/chunks/432dcb4ed9876691.js\",\"/_next/static/chunks/320bcfb5cbdf2b21.js\",\"/_next/static/chunks/a0453ac06cf16faf.js\",\"/_next/static/chunks/5b0519766a61fca9.js\"],\"default\"]\nd:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/e0df19a295da9e87.js\"],\"OutletBoundary\"]\ne:\"$Sreact.suspense\"\n10:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/e0df19a295da9e87.js\"],\"ViewportBoundary\"]\n12:I[97367,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/e0df19a295da9e87.js\"],\"MetadataBoundary\"]\n14:I[68027,[],\"default\"]\n:HL[\"/_next/static/chunks/0483ce684b13e733.css\",\"style\"]\n:HL[\"/_next/static/media/797e433ab948586e-s.p.dbea232f.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n:HL[\"/_next/static/media/caa3a2e1cccd8315-s.p.853070df.woff2\",\"font\",{\"crossOrigin\":\"\",\"type\":\"font/woff2\"}]\n"])</script>
21<script>self.__next_f.push([1,"0:{\"P\":null,\"b\":\"u3SMVslZF30N18bU72H_j\",\"c\":[\"\",\"\"],\"q\":\"\",\"i\":false,\"f\":[[[\"\",{\"children\":[\"__PAGE__\",{}]},\"$undefined\",\"$undefined\",true],[[\"$\",\"$1\",\"c\",{\"children\":[[[\"$\",\"link\",\"0\",{\"rel\":\"stylesheet\",\"href\":\"/_next/static/chunks/0483ce684b13e733.css\",\"precedence\":\"next\",\"crossOrigin\":\"$undefined\",\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/b1701ff67dbbd496.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/cb8b06f3f91e6ce0.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-2\",{\"src\":\"/_next/static/chunks/432dcb4ed9876691.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-3\",{\"src\":\"/_next/static/chunks/320bcfb5cbdf2b21.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"html\",null,{\"lang\":\"en\",\"suppressHydrationWarning\":true,\"children\":[[\"$\",\"head\",null,{\"children\":[\"$\",\"script\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"(function(){try{var m=localStorage.getItem('theme-preference')||'auto';var t=m==='auto'?(window.matchMedia('(prefers-color-scheme: dark)').matches?'dark':'light'):m;document.documentElement.setAttribute('data-theme',t);}catch(e){}})();\"}}]}],[\"$\",\"body\",null,{\"className\":\"geist_a71539c9-module__T19VSG__variable geist_mono_8d43a2aa-module__8Li5zG__variable antialiased\",\"children\":[[\"$\",\"$L2\",null,{\"children\":[[\"$\",\"$L3\",null,{}],[\"$\",\"$L4\",null,{}],[\"$\",\"$L5\",null,{\"parallelRouterKey\":\"children\",\"error\":\"$undefined\",\"errorStyles\":\"$undefined\",\"errorScripts\":\"$undefined\",\"template\":[\"$\",\"$L6\",null,{}],\"templateStyles\":\"$undefined\",\"templateScripts\":\"$undefined\",\"notFound\":[[[\"$\",\"title\",null,{\"children\":\"404: This page could not be found.\"}],[\"$\",\"div\",null,{\"style\":{\"fontFamily\":\"system-ui,\\\"Segoe UI\\\",Roboto,Helvetica,Arial,sans-serif,\\\"Apple Color Emoji\\\",\\\"Segoe UI Emoji\\\"\",\"height\":\"100vh\",\"textAlign\":\"center\",\"display\":\"flex\",\"flexDirection\":\"column\",\"alignItems\":\"center\",\"justifyContent\":\"center\"},\"children\":[\"$\",\"div\",null,{\"children\":[[\"$\",\"style\",null,{\"dangerouslySetInnerHTML\":{\"__html\":\"body{color:#000;background:#fff;margin:0}.next-error-h1{border-right:1px solid rgba(0,0,0,.3)}@media (prefers-color-scheme:dark){body{color:#fff;background:#000}.next-error-h1{border-right:1px solid rgba(255,255,255,.3)}}\"}}],[\"$\",\"h1\",null,{\"className\":\"next-error-h1\",\"style\":{\"display\":\"inline-block\",\"margin\":\"0 20px 0 0\",\"padding\":\"0 23px 0 0\",\"fontSize\":24,\"fontWeight\":500,\"verticalAlign\":\"top\",\"lineHeight\":\"49px\"},\"children\":404}],[\"$\",\"div\",null,{\"style\":{\"display\":\"inline-block\"},\"children\":[\"$\",\"h2\",null,{\"style\":{\"fontSize\":14,\"fontWeight\":400,\"lineHeight\":\"49px\",\"margin\":0},\"children\":\"This page could not be found.\"}]}]]}]}]],[]],\"forbidden\":\"$undefined\",\"unauthorized\":\"$undefined\"}]]}],[\"$\",\"$L7\",null,{}],[\"$\",\"$L8\",null,{}]]}]]}]]}],{\"children\":[[\"$\",\"$1\",\"c\",{\"children\":[[\"$\",\"$L9\",null,{\"Component\":\"$a\",\"serverProvidedParams\":{\"searchParams\":{},\"params\":{},\"promises\":[\"$@b\",\"$@c\"]}}],[[\"$\",\"script\",\"script-0\",{\"src\":\"/_next/static/chunks/a0453ac06cf16faf.js\",\"async\":true,\"nonce\":\"$undefined\"}],[\"$\",\"script\",\"script-1\",{\"src\":\"/_next/static/chunks/5b0519766a61fca9.js\",\"async\":true,\"nonce\":\"$undefined\"}]],[\"$\",\"$Ld\",null,{\"children\":[\"$\",\"$e\",null,{\"name\":\"Next.MetadataOutlet\",\"children\":\"$@f\"}]}]]}],{},null,false,false]},null,false,false],[\"$\",\"$1\",\"h\",{\"children\":[null,[\"$\",\"$L10\",null,{\"children\":\"$L11\"}],[\"$\",\"div\",null,{\"hidden\":true,\"children\":[\"$\",\"$L12\",null,{\"children\":[\"$\",\"$e\",null,{\"name\":\"Next.Metadata\",\"children\":\"$L13\"}]}]}],[\"$\",\"meta\",null,{\"name\":\"next-size-adjust\",\"content\":\"\"}]]}],false]],\"m\":\"$undefined\",\"G\":[\"$14\",[]],\"S\":true}\n"])</script>
21<script>self.__next_f.push([1,"b:{}\nc:\"$0:f:0:1:1:children:0:props:children:0:props:serverProvidedParams:params\"\n"])</script>
21<script>self.__next_f.push([1,"11:[[\"$\",\"meta\",\"0\",{\"charSet\":\"utf-8\"}],[\"$\",\"meta\",\"1\",{\"name\":\"viewport\",\"content\":\"width=device-width, initial-scale=1\"}]]\n"])</script>
21<script>self.__next_f.push([1,"15:I[27201,[\"/_next/static/chunks/ff1a16fafef87110.js\",\"/_next/static/chunks/e0df19a295da9e87.js\"],\"IconMark\"]\nf:null\n13:[[\"$\",\"title\",\"0\",{\"children\":\"Create Next App\"}],[\"$\",\"meta\",\"1\",{\"name\":\"description\",\"content\":\"Generated by create next app\"}],[\"$\",\"link\",\"2\",{\"rel\":\"icon\",\"href\":\"/favicon.ico?favicon.0b3bf435.ico\",\"sizes\":\"256x256\",\"type\":\"image/x-icon\"}],[\"$\",\"$L15\",\"3\",{}]]\n"])</script>
21<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v4bc70e2c01a94c73b74392e4234840661791215815920" integrity="sha512-L0ha0OXavK/8okipN9F8BtP84dg9DUhPERbBXzwI6dgTA55d2+yweo3pn5CSFYs45/r8md2+xvUPtTdvTNRfjA==" data-cf-beacon='{"version":"2024.11.0","token":"9771a8985d2b4d64afad19cf21be355e","r":1,"spa":2}' crossorigin="anonymous"></script>
21 22</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.