:root{--personio-black:#002f3e;--personio-text-gray:#64748b;--personio-blue:#06f;--personio-blue-text:#0052cc;--personio-purple:#e8d5ff;--personio-coral:#ff6b6b;--personio-pink:#ffb6c1;--personio-yellow:#ffe5b4;--personio-beige:#fff4e6;--gradient-purple-hero:linear-gradient(180deg,#fff 0%,#fefeff 10%,#fdfdfe 15%,#fcfcfe 20%,#fbfaff 25%,#faf5ff 35%,#f8f2ff 45%,#f7f0ff 55%,#f6eeff 65%,#f5ebff 75%,#f4e9ff 85%,#f3e7ff 90%,#f2e6ff 95%,#f1e4ff 100%);--gradient-purple-section:linear-gradient(180deg,#f5ebff 0%,#f3e7ff 12%,#f2e5ff 18%,#f1e3ff 25%,#f0e1ff 31%,#efdfff 37%,#edd5ff 50%,#ecd3ff 62%,#ebd1ff 68%,#eacdff 75%,#e9cbff 81%,#e8c9ff 87%,#e8d5ff 100%);--gradient-coral:linear-gradient(135deg,#fffbf0 0%,#fff9f0 5%,#fff6eb 8%,#fff3e3 12%,#fff0db 15%,#ffecd3 18%,#ffe8c5 22%,#ffe5bd 26%,#ffe2b4 30%,#ffdeac 34%,#ffdaa4 38%,#ffdca8 42%,#ffd8a0 46%,#ffd0a0 50%,#ffcc98 54%,#ffc890 58%,#ffc492 62%,#ffc08a 66%,#ffbc82 70%,#ffb088 74%,#ffac80 78%,#ffa078 82%,#ff9c70 86%,#ff8e72 90%,#ff866a 93%,#ff7e62 96%,#ff6b5e 100%);--gradient-beige:linear-gradient(180deg,#fffcf7 0%,#fffbf5 8%,#fffaf3 15%,#fff9f1 20%,#fff9f0 25%,#fff7ee 30%,#fff6ec 35%,#fff6ea 40%,#fff5e8 45%,#fff4e6 50%,#fff2e2 55%,#fff1e0 60%,#ffefdd 65%,#ffeed5 70%,#ffecd1 75%,#ffe9ca 78%,#ffe5b4 82%,#ffe3b0 86%,#ffdfa4 90%,#ffdda0 95%,#ffd994 100%);--font-main:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;--space-section:120px;--space-container:80px}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-main);color:var(--personio-black);-webkit-font-smoothing:antialiased;background:#fff}.container{max-width:1200px;margin:0 auto;padding:0 24px}.nav{z-index:100;background:#fff;border-bottom:1px solid #e5e7eb;position:-webkit-sticky;position:sticky;top:0}.nav-content{justify-content:space-between;align-items:center;max-width:1400px;height:72px;margin:0 auto;padding:0 40px;display:flex}.nav-logo{color:var(--personio-black);font-size:24px;font-weight:700;text-decoration:none}.nav-links{align-items:center;gap:32px;display:flex}.nav-link{color:var(--personio-black);font-size:15px;font-weight:500;text-decoration:none}.nav-actions{align-items:center;gap:12px;display:flex}.btn{cursor:pointer;border:none;border-radius:8px;padding:10px 24px;font-size:15px;font-weight:600;text-decoration:none;transition:all .2s;display:inline-block}.btn-primary{background:var(--personio-black);color:#fff}.btn-primary:hover{background:#1a1a1a;transform:translateY(-1px)}.btn-secondary{color:var(--personio-black);background:0 0;border:1px solid #e5e7eb}.btn-secondary:hover{background:#f9fafb}.hero{background:var(--gradient-purple-hero);text-align:center;padding:100px 0 120px;position:relative;overflow:hidden}.hero-label{color:var(--personio-blue-text);letter-spacing:1.5px;text-transform:uppercase;margin-bottom:24px;font-size:13px;font-weight:700}.hero-title{color:var(--personio-black);max-width:900px;margin-bottom:24px;margin-left:auto;margin-right:auto;font-size:max(40px,min(6vw,64px));font-weight:700;line-height:1.1}.hero-subtitle{color:var(--personio-text-gray);max-width:650px;margin:0 auto 40px;font-size:20px;line-height:1.6}.hero-buttons{flex-wrap:wrap;justify-content:center;gap:16px;display:flex}.card-mockup{background:#fff;border-radius:16px;padding:32px;position:relative;box-shadow:0 20px 40px rgba(0,0,0,.1)}.card-grid{grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px;margin-top:80px;display:grid}.section-gradient-purple{background:var(--gradient-purple-section);padding:var(--space-section)0}.section-gradient-coral{background:var(--gradient-coral);padding:var(--space-section)0;position:relative;overflow:hidden}.section-gradient-beige{background:var(--gradient-beige);padding:var(--space-section)0}.section-label{color:var(--personio-blue-text);letter-spacing:1.5px;text-transform:uppercase;text-align:center;margin-bottom:16px;font-size:13px;font-weight:700}.section-title{text-align:center;color:var(--personio-black);margin-bottom:24px;font-size:max(32px,min(4vw,48px));font-weight:700;line-height:1.2}.section-subtitle{color:var(--personio-text-gray);text-align:center;max-width:700px;margin:0 auto 64px;font-size:18px;line-height:1.6}.logo-wall{text-align:center;background:var(--gradient-purple-section);padding:60px 0}.logo-wall-text{color:var(--personio-text-gray);margin-bottom:32px;font-size:16px}.logo-grid{opacity:.6;flex-wrap:wrap;justify-content:center;align-items:center;gap:48px;display:flex}@media (max-width:768px){.nav-links{display:none}.hero{padding:60px 0 80px}.section-gradient-purple,.section-gradient-coral,.section-gradient-beige{padding:80px 0}}