/* Flatplanner marketing site — ported from the "Flatplanner Home v2" design. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500&display=swap');

/* ---------- Tokens ---------- */
[data-theme] { --desk:#f3f1ec; --band:#faf8f4; --sheet:#ffffff; --sheet-2:#fbfaf7; --sheet-border:rgba(26,26,24,0.08); --ink:#17171a; --muted:#5f5e5a; --body:#33332f; --line:rgba(26,26,24,0.1); --chip:#f4f2ed; --btn-border:rgba(26,26,24,0.18); --ph1:#efede8; --ph2:#e6e4de; --dark:#141417; --dark-2:#1d1d22; --dark-line:rgba(255,255,255,0.09); --shadow:rgba(40,30,20,0.22); --hi:rgba(255,255,255,0.9); --glass:rgba(255,255,255,0.72); --grad-text:linear-gradient(100deg,var(--accent-deep) 0%,var(--accent) 70%); color-scheme: light; }
[data-theme="dark"] { --desk:#0f0f11; --band:#141417; --sheet:#1a1a1e; --sheet-2:#17171b; --sheet-border:rgba(255,255,255,0.07); --ink:#f0eee9; --muted:#a3a19a; --body:#cfcdc6; --line:rgba(255,255,255,0.1); --chip:#232328; --btn-border:rgba(255,255,255,0.2); --ph1:#202024; --ph2:#1a1a1e; --dark:#0a0a0c; --dark-2:#141418; --dark-line:rgba(255,255,255,0.08); --shadow:rgba(0,0,0,0.7); --hi:rgba(255,255,255,0.06); --glass:rgba(26,26,30,0.72); --grad-text:linear-gradient(100deg,var(--accent) 0%,var(--accent-2) 90%); color-scheme: dark; }
@media (prefers-color-scheme: dark) { [data-theme="system"] { --desk:#0f0f11; --band:#141417; --sheet:#1a1a1e; --sheet-2:#17171b; --sheet-border:rgba(255,255,255,0.07); --ink:#f0eee9; --muted:#a3a19a; --body:#cfcdc6; --line:rgba(255,255,255,0.1); --chip:#232328; --btn-border:rgba(255,255,255,0.2); --ph1:#202024; --ph2:#1a1a1e; --dark:#0a0a0c; --dark-2:#141418; --dark-line:rgba(255,255,255,0.08); --shadow:rgba(0,0,0,0.7); --hi:rgba(255,255,255,0.06); --glass:rgba(26,26,30,0.72); --grad-text:linear-gradient(100deg,var(--accent) 0%,var(--accent-2) 90%); color-scheme: dark; } }

[data-accent="vermilion"] { --accent:#F0532D; --accent-2:#FF9F43; --accent-deep:#B8360F; --accent-ink:#17171a; }
[data-accent="magenta"]   { --accent:#D81B72; --accent-2:#FF6FA8; --accent-deep:#9C0F50; --accent-ink:#ffffff; }
[data-accent="cobalt"]    { --accent:#4044E6; --accent-2:#8B7BFF; --accent-deep:#2A2BB0; --accent-ink:#ffffff; }
[data-accent="original"]  { --accent:#0335A2; --accent-2:#3D86F0; --accent-deep:#022070; --accent-ink:#ffffff; }

/* ---------- Base ---------- */
html { background: var(--desk); }
body { margin: 0; -webkit-font-smoothing: antialiased; background: var(--desk); color: var(--ink); }
* { box-sizing: border-box; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }
img, video { max-width: 100%; }
[hidden] { display: none !important; }
.fp-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.fp-skip { position:absolute; left:16px; top:-60px; z-index:200; padding:10px 16px; border-radius:999px; background:var(--sheet); color:var(--ink); font-weight:700; text-decoration:none; box-shadow:0 10px 24px -10px var(--shadow); }
.fp-skip:focus { top:12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

.fp-root { font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color:var(--ink); background:var(--desk); width:100%; min-height:100vh; overflow-x:hidden; }
.fp-mono { font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

.fp-nav a.fp-link { color: var(--ink); text-decoration: none; opacity: .78; transition: opacity .15s; }
.fp-nav a.fp-link:hover { opacity: 1; }
[id] { scroll-margin-top: 104px; }

/* ---------- Buttons ---------- */
.fp-btn { display:inline-flex; align-items:center; gap:10px; border-radius:999px; text-decoration:none; font-weight:700; transition: transform .2s ease, box-shadow .2s ease; }
@media (hover: hover) { .fp-btn:hover { transform: translateY(-2px); } }
.fp-btn-accent { background: linear-gradient(135deg,var(--accent),var(--accent-2)); color: var(--accent-ink); box-shadow: 0 10px 24px -10px var(--accent), inset 0 1px 0 rgba(255,255,255,0.35); }
.fp-btn-accent:hover { box-shadow: 0 16px 34px -12px var(--accent), inset 0 1px 0 rgba(255,255,255,0.35); }
.fp-btn-ghost { border:1px solid var(--btn-border); color: var(--ink); background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.fp-btn-ink { background: var(--accent-ink); color: var(--accent); }

.fp-grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Cards, sections ---------- */
.fp-card { position:relative; background: linear-gradient(180deg,var(--sheet),var(--sheet-2)); border:1px solid var(--sheet-border); border-radius:32px; box-shadow: inset 0 1px 0 var(--hi), 0 1px 2px rgba(0,0,0,0.04), 0 40px 80px -48px var(--shadow); }
.fp-section { width:100%; max-width:1320px; margin:0 auto; padding:clamp(32px,4.4vw,64px) clamp(24px,4.2vw,60px); }
.fp-split { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,440px),1fr)); gap:clamp(40px,5.5vw,80px); align-items:center; }
.fp-eyebrow { display:flex; align-items:flex-end; gap:16px; margin-bottom:22px; }
.fp-eyebrow .fp-mono { font-size:11px; letter-spacing:0.14em; color:var(--muted); padding-bottom:6px; }
.fp-h2 { font-weight:800; font-size:clamp(30px,3.6vw,46px); line-height:1.06; letter-spacing:-0.04em; margin:0 0 18px; text-wrap:balance; }
.fp-lead { font-size:17px; line-height:1.62; color:var(--muted); margin:0 0 28px; max-width:50ch; }

.fp-num { font-weight:800; font-size:72px; line-height:.8; letter-spacing:-0.05em; color:transparent; -webkit-text-stroke:1.5px var(--accent); opacity:.9; }

.fp-list { list-style:none; margin:0; padding:0; display:grid; gap:16px; font-size:15.5px; line-height:1.58; color:var(--body); }
.fp-list li { display:flex; gap:14px; align-items:flex-start; }
.fp-list li::before { content:""; flex:none; width:9px; height:15px; margin-top:4px; border-radius:2px; background: linear-gradient(180deg,var(--accent-2),var(--accent)); transform: skewX(-14.5deg); }
.fp-list strong { font-weight:700; color: var(--ink); }

.fp-pill { padding:7px 12px; border-radius:999px; border:1px solid var(--line); }
.fp-chip { padding:8px 13px; border:1px solid var(--line); border-radius:999px; background:var(--chip); }

/* Media frames */
.fp-frame { position:relative; margin-right:18px; margin-bottom:18px; }
.fp-frame::before { content:""; position:absolute; inset:0; border-radius:22px; background: linear-gradient(135deg,var(--accent),var(--accent-2)); transform: translate(18px,18px) rotate(2deg); opacity:.9; z-index:0; }
.fp-frame::after { content:""; position:absolute; inset:0; border-radius:22px; background: var(--sheet); border:1px solid var(--line); transform: translate(9px,9px) rotate(1deg); z-index:0; }
.fp-frame > * { position:relative; z-index:1; }
.fp-zoom { display:block; width:100%; padding:0; border:0; font:inherit; cursor:zoom-in; border-radius:22px; overflow:hidden; background:#1c1c1e; box-shadow:0 2px 4px rgba(0,0,0,0.1),0 40px 70px -30px var(--shadow); }
.fp-zoom img, .fp-zoom video, .fp-zoom picture { display:block; width:100%; height:100%; object-fit:cover; }

.fp-stage { perspective: 1800px; position:relative; padding:20px 24px 40px 0; }
.fp-tilt { position:relative; transform-style: preserve-3d; transform: rotateY(-13deg) rotateX(7deg) rotateZ(1deg); transition: transform .6s cubic-bezier(.2,.7,.2,1); }
@media (hover: hover) { .fp-stage:hover .fp-tilt { transform: rotateY(-6deg) rotateX(3deg) rotateZ(0deg); } }
.fp-float { animation: fpFloat 6s ease-in-out infinite; }
.fp-float.d2 { animation-delay: -2s; }
.fp-float.d3 { animation-delay: -4s; }
@keyframes fpFloat { 0%,100% { translate: 0 0; } 50% { translate: 0 -8px; } }
.fp-glass-chip { position:absolute; display:flex; align-items:center; background:var(--glass); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid var(--line); box-shadow:0 18px 36px -16px var(--shadow); white-space:nowrap; }

.fp-tile { transition: transform .25s ease, box-shadow .25s ease; }
@media (hover: hover) { .fp-tile:hover { transform: translateY(-4px); box-shadow: inset 0 1px 0 var(--hi), 0 30px 50px -30px var(--shadow); } }

/* Layout thumbnails (section 02) */
.fp-layouts-panel { position:relative; border-radius:26px; overflow:hidden; background:radial-gradient(80% 60% at 100% 0%,color-mix(in srgb,var(--accent) 30%,transparent),transparent 60%),linear-gradient(160deg,#202026,#141417); border:1px solid rgba(255,255,255,0.08); box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 40px 70px -30px var(--shadow); padding:clamp(24px,3vw,38px); }
.fp-layouts { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px 16px; }
.fp-layout { display:flex; flex-direction:column; gap:12px; align-items:center; }
.fp-layout-page { width:100%; aspect-ratio:3/4; border-radius:4px; padding:9%; background:#25252b; border:1px solid #393940; box-shadow:0 12px 20px -12px rgba(0,0,0,0.6); }
.fp-layout-grid { width:100%; height:100%; display:grid; gap:5%; }
.fp-layout-grid > div { border:1.5px solid #a8a59c; border-radius:2px; background:#2a2a30; }
.fp-layout-name { font-size:10px; line-height:1.3; letter-spacing:0.06em; text-transform:uppercase; color:#b9b6ad; text-align:center; }
.fp-layout.is-active .fp-layout-page { background:color-mix(in srgb,var(--accent) 16%,#1c1c21); border-color:var(--accent); box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 20%,transparent),0 14px 24px -10px var(--accent); }
.fp-layout.is-active .fp-layout-grid > div { border:2px solid var(--accent-2); background:color-mix(in srgb,var(--accent) 22%,#1c1c21); }
.fp-layout.is-active .fp-layout-name { color:#f3efe8; }

/* Status cards (section 04) */
.fp-status { padding:18px; border-radius:20px; background:var(--chip); border:1px solid var(--line); }
.fp-status .fp-mono { font-size:10.5px; letter-spacing:0.1em; color:var(--muted); margin-bottom:14px; }
.fp-status ul { list-style:none; margin:0; padding:0; display:grid; gap:8px; font-size:14px; font-weight:600; color:var(--body); }
.fp-status li { display:flex; align-items:center; gap:9px; }
.fp-dot { width:8px; height:8px; border-radius:50%; background:#b9b6ad; flex:none; }
.fp-dot.amber { background:#e6a23c; } .fp-dot.green { background:#2f9e5b; } .fp-dot.accent { background:var(--accent); }

/* Roles (section 06) */
.fp-role { padding:22px; border-radius:22px; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); box-shadow:inset 0 1px 0 rgba(255,255,255,0.08); }
.fp-role .fp-mono { font-size:10.5px; letter-spacing:.1em; color:var(--accent-2); margin-bottom:12px; }
.fp-role h3 { font-weight:700; font-size:18px; letter-spacing:-0.02em; margin:0 0 8px; }
.fp-role p { margin:0; font-size:14.5px; line-height:1.5; color:#c9c6be; }

/* Collaboration tiles (section 07) */
.fp-collab { display:flex; gap:16px; align-items:flex-start; padding:22px 24px; border-radius:22px; background:var(--chip); border:1px solid var(--line); }
.fp-collab-icon { flex:none; width:40px; height:40px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--accent-ink); font-weight:800; font-size:13px; box-shadow:0 10px 20px -10px var(--accent); }
.fp-collab p { margin:0; font-size:15.5px; line-height:1.55; color:var(--body); }
.fp-collab strong { font-weight:700; color:var(--ink); }

/* Platform tiles (section 08) */
.fp-feature { padding:28px; border-radius:26px; }
.fp-feature-mark { display:block; width:12px; height:20px; border-radius:3px; background:linear-gradient(180deg,var(--accent-2),var(--accent)); transform:skewX(-14.5deg); margin-bottom:20px; }
.fp-feature h3 { font-size:17px; font-weight:700; letter-spacing:-0.02em; margin:0 0 8px; }
.fp-feature p { margin:0; font-size:15px; line-height:1.55; color:var(--muted); }

/* Language switch (EN/DE) */
.fp-lang { display:inline-flex; align-items:center; gap:2px; padding:3px; border-radius:999px; border:1px solid var(--line); background:var(--glass); font-family:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; font-size:11.5px; font-weight:500; letter-spacing:.06em; }
.fp-lang a { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:32px; padding:0 8px; border-radius:999px; color:var(--muted); text-decoration:none; transition: background .15s ease, color .15s ease; }
.fp-lang a:hover { color:var(--ink); }
.fp-lang a[aria-current="true"] { background:var(--ink); color:var(--desk); }

/* Native apps (section 08) */
.fp-apps { background: radial-gradient(60% 70% at 100% 0%, color-mix(in srgb,var(--accent) 16%,transparent), transparent 70%), linear-gradient(180deg,var(--sheet),var(--sheet-2)); }
.fp-badge { display:inline-flex; align-items:center; margin-bottom:3px; padding:6px 11px; border-radius:999px; font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--accent-ink); box-shadow:0 8px 18px -10px var(--accent); }
.fp-eyebrow .fp-badge { color:var(--accent-ink); padding:6px 11px; letter-spacing:.1em; }
.fp-apps-note { margin:0; font-size:14.5px; line-height:1.6; color:var(--muted); max-width:52ch; padding-top:18px; border-top:1px solid var(--line); }
.fp-device { display:flex; gap:16px; align-items:flex-start; padding:22px 24px; border-radius:22px; background:var(--chip); border:1px solid var(--line); }
.fp-device h3 { margin:0 0 6px; font-size:17px; font-weight:700; letter-spacing:-0.02em; }
.fp-device p { margin:0; font-size:15px; line-height:1.55; color:var(--body); }
.fp-device-icon { flex:none; width:44px; height:44px; border-radius:14px; display:grid; place-items:center; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--accent-ink); box-shadow:0 10px 20px -10px var(--accent); }

/* Stats */
.fp-stat { font-size:38px; font-weight:800; letter-spacing:-0.04em; line-height:1; margin-bottom:10px; }
.fp-stat-label { font-size:13.5px; line-height:1.45; color:var(--muted); }

/* ---------- Mobile menu ---------- */
.fp-burger { display:none; width:44px; height:44px; border-radius:999px; border:1px solid var(--line); background:var(--sheet); color:var(--ink); align-items:center; justify-content:center; cursor:pointer; padding:0; flex:none; }
.fp-mobmenu { display:none; }
.fp-scrim { display:none; }
.fp-burger { transition: background .25s ease, color .25s ease, border-color .25s ease, transform .15s ease; }
.fp-burger:active { transform: scale(.9); }
.fp-burger.is-open { background: linear-gradient(135deg,var(--accent),var(--accent-2)); color: var(--accent-ink); border-color: transparent; box-shadow: 0 10px 22px -10px var(--accent); }
.fp-burger .fp-x, .fp-burger .fp-lines { animation: fpSpinIn .4s cubic-bezier(.16,1,.3,1) both; }
.fp-burger .fp-x { display:none; }
.fp-burger.is-open .fp-x { display:block; }
.fp-burger.is-open .fp-lines { display:none; }

/* ---------- Form ---------- */
.fp-label { font-size:13px; font-weight:700; color:var(--ink); }
.fp-label em { font-style:normal; font-weight:500; color:var(--muted); }
.fp-field { display:grid; gap:7px; align-content:start; }
.fp-input { width:100%; font:inherit; font-size:15px; color:var(--ink); background:var(--chip); border:1.5px solid transparent; border-radius:14px; padding:13px 15px; outline:none; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.fp-input::placeholder { color: color-mix(in srgb,var(--muted) 70%,transparent); }
.fp-input:focus { border-color: var(--accent); background: var(--sheet); box-shadow: 0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent); }
.fp-input.is-err { border-color:#e03e3e; }
.fp-err { font-size:12.5px; font-weight:600; color:#e03e3e; }
.fp-err:empty { display:none; }
.fp-opt { font:inherit; font-size:14px; font-weight:600; padding:10px 16px; border-radius:999px; border:1.5px solid var(--line); background:var(--sheet); color:var(--ink); cursor:pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease; }
.fp-opt:active { transform: scale(.95); }
.fp-opt.is-on { background: linear-gradient(135deg,var(--accent),var(--accent-2)); color: var(--accent-ink); border-color: transparent; box-shadow: 0 8px 18px -10px var(--accent); }
.fp-submit { justify-content:center; width:100%; border:0; cursor:pointer; font-family:inherit; }
.fp-submit[disabled] { opacity:.8; cursor:progress; }
.fp-turnstile { min-height:65px; max-width:100%; }
.fp-turnstile.is-compact { min-height:140px; }
.fp-hp { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.fp-form-error { font-size:13.5px; line-height:1.5; font-weight:600; color:#e03e3e; text-align:center; }
.fp-form-error:empty { display:none; }
@keyframes fpSpin { to { transform: rotate(360deg); } }
.fp-spin { width:16px; height:16px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; display:inline-block; animation: fpSpin .7s linear infinite; }
@keyframes fpDraw { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
@keyframes fpRise { from { opacity:0; transform: translateY(10px); } to { opacity:1; transform:none; } }
.fp-check { animation: fpPopIn .6s cubic-bezier(.2,.9,.3,1.2) both; }
.fp-checkpath { stroke-dasharray: 30; animation: fpDraw .5s .25s ease-out both; }
.fp-sent .fp-rise { animation: fpRise .5s cubic-bezier(.16,1,.3,1) both; }
.fp-sent .fp-rise.r2 { animation-delay: .35s; } .fp-sent .fp-rise.r3 { animation-delay: .45s; } .fp-sent .fp-rise.r4 { animation-delay: .55s; }

/* ---------- Animations ---------- */
@keyframes fpLanded { 0% { outline-color: color-mix(in srgb,var(--accent) 80%,transparent); outline-offset: 2px; } 100% { outline-color: transparent; outline-offset: 18px; } }
.fp-landed { outline: 2px solid transparent; animation: fpLanded 1.1s cubic-bezier(.16,1,.3,1) both; }
@keyframes fpScrimIn { from { opacity:0; } to { opacity:1; } }
@keyframes fpScrimOut { from { opacity:1; } to { opacity:0; } }
@keyframes fpMenuIn { 0% { opacity:0; transform: translateY(-16px) scale(.94); clip-path: inset(0 0 100% 0 round 28px); } 55% { opacity:1; } 100% { opacity:1; transform:none; clip-path: inset(0 0 0 0 round 28px); } }
@keyframes fpMenuOut { from { opacity:1; transform:none; } to { opacity:0; transform: translateY(-12px) scale(.96); } }
@keyframes fpLinkIn { from { opacity:0; transform: translateX(-26px) skewX(-14.5deg); } to { opacity:1; transform:none; } }
@keyframes fpArrowIn { from { opacity:0; transform: translateX(-12px); } to { opacity:1; transform:none; } }
@keyframes fpPopIn { 0% { opacity:0; transform: translateY(14px) scale(.9); } 70% { opacity:1; transform: translateY(-2px) scale(1.03); } 100% { opacity:1; transform:none; } }
@keyframes fpSpinIn { from { opacity:0; transform: rotate(-90deg) scale(.5); } to { opacity:1; transform:none; } }
@keyframes fpGlow { from { opacity:0; transform: scale(.5); } to { opacity:1; transform:none; } }

.fp-scrim.is-open { animation: fpScrimIn .3s ease both; }
.fp-scrim.is-closing { animation: fpScrimOut .22s ease both; }
.fp-mobmenu.is-open { transform-origin: 100% 0; animation: fpMenuIn .5s cubic-bezier(.16,1,.3,1) both; }
.fp-mobmenu.is-closing { transform-origin: 100% 0; animation: fpMenuOut .22s cubic-bezier(.5,0,.75,0) both; }
.fp-mobmenu.is-open .fp-mlink { animation: fpLinkIn .55s cubic-bezier(.16,1,.3,1) both; }
.fp-mobmenu.is-open .fp-mlink:nth-of-type(1) { animation-delay: .08s; }
.fp-mobmenu.is-open .fp-mlink:nth-of-type(2) { animation-delay: .13s; }
.fp-mobmenu.is-open .fp-mlink:nth-of-type(3) { animation-delay: .18s; }
.fp-mobmenu.is-open .fp-mlink:nth-of-type(4) { animation-delay: .23s; }
.fp-mobmenu.is-open .fp-mlink:nth-of-type(5) { animation-delay: .28s; }
.fp-mobmenu.is-open .fp-mlink span { display:inline-block; animation: fpArrowIn .45s cubic-bezier(.16,1,.3,1) both; }
.fp-mobmenu.is-open .fp-mlink:nth-of-type(1) span { animation-delay: .22s; }
.fp-mobmenu.is-open .fp-mlink:nth-of-type(2) span { animation-delay: .27s; }
.fp-mobmenu.is-open .fp-mlink:nth-of-type(3) span { animation-delay: .32s; }
.fp-mobmenu.is-open .fp-mlink:nth-of-type(4) span { animation-delay: .37s; }
.fp-mobmenu.is-open .fp-mlink:nth-of-type(5) span { animation-delay: .42s; }
.fp-mobmenu.is-open .fp-menu-actions a { animation: fpPopIn .55s cubic-bezier(.2,.9,.3,1.2) both; }
.fp-mobmenu.is-open .fp-menu-actions a:nth-child(1) { animation-delay: .35s; }
.fp-mobmenu.is-open .fp-menu-actions a:nth-child(2) { animation-delay: .42s; }
.fp-mobmenu.is-open .fp-menu-glow { animation: fpGlow .9s cubic-bezier(.16,1,.3,1) .1s both; }
.fp-mobmenu a.fp-mlink { display:flex; justify-content:space-between; align-items:center; padding:16px 4px; font-size:18px; font-weight:700; letter-spacing:-0.02em; color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line); }

/* ---------- Cookie consent ---------- */
.fp-consent { position:fixed; z-index:60; left:20px; bottom:max(20px, env(safe-area-inset-bottom)); width:min(420px, calc(100vw - 40px)); padding:20px 20px 18px 22px; border-radius:26px; overflow:hidden;
  font-family:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color:var(--ink);
  background:color-mix(in srgb,var(--sheet) 90%,transparent); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--line); box-shadow:inset 0 1px 0 var(--hi), 0 30px 60px -24px var(--shadow), 0 0 0 1px color-mix(in srgb,var(--accent) 10%,transparent); }
.fp-consent::before { content:""; position:absolute; left:0; top:20px; bottom:20px; width:4px; border-radius:0 4px 4px 0; background:linear-gradient(180deg,var(--accent-2),var(--accent)); }
.fp-consent-glow { position:absolute; right:-80px; top:-90px; width:220px; height:220px; border-radius:50%; pointer-events:none; background:radial-gradient(circle,color-mix(in srgb,var(--accent) 26%,transparent),transparent 68%); }
.fp-consent:not([hidden]) { animation: fpPopIn .6s cubic-bezier(.2,.9,.3,1.2) .5s both; }
.fp-consent-head { position:relative; display:flex; align-items:center; gap:12px; margin-bottom:10px; }
.fp-consent-icon { flex:none; width:36px; height:36px; border-radius:12px; display:grid; place-items:center; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--accent-ink); box-shadow:0 10px 20px -10px var(--accent); }
.fp-consent-title { font-size:15.5px; font-weight:800; letter-spacing:-0.02em; }
.fp-consent p { position:relative; margin:0; font-size:14px; line-height:1.55; color:var(--muted); }
.fp-consent a { color:var(--accent); font-weight:600; }
.fp-consent-actions { position:relative; display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:16px; }
.fp-consent-actions button { appearance:none; font:inherit; font-size:14px; font-weight:700; padding:12px 14px; border-radius:999px; cursor:pointer; color:var(--ink); background:var(--glass); border:1.5px solid var(--btn-border); transition: border-color .15s ease, background .15s ease, transform .15s ease; }
.fp-consent-actions button:hover { border-color:var(--accent); background:color-mix(in srgb,var(--accent) 10%,var(--sheet)); }
.fp-consent-actions button:active { transform:scale(.97); }
.fp-linkish { font:inherit; font-weight:600; color:var(--accent); background:none; border:0; padding:0; cursor:pointer; }
.fp-linkish:hover { text-decoration:underline; text-underline-offset:3px; }
@media (max-width: 560px) { .fp-consent { left:12px; right:12px; width:auto; bottom:max(12px, env(safe-area-inset-bottom)); } }
@media (prefers-reduced-motion: reduce) { .fp-consent { animation:none !important; } }

/* ---------- Lightbox ---------- */
.fp-lb { position:fixed; inset:0; z-index:100; background:rgba(12,12,11,0.88); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:clamp(16px,4vw,56px); cursor:zoom-out; }
.fp-lb-media { max-width:100%; max-height:100%; overflow:hidden; border-radius:14px; box-shadow:0 30px 80px -20px rgba(0,0,0,0.7); cursor:zoom-in; display:flex; }
.fp-lb-media.is-zoomed { cursor:zoom-out; touch-action:none; }
.fp-lb-media img, .fp-lb-media video { display:block; max-width:100%; max-height:calc(100vh - clamp(32px,8vw,112px)); object-fit:contain; transition:transform 180ms ease-out; user-select:none; -webkit-user-select:none; }
.fp-lb-bar { position:absolute; bottom:18px; left:50%; transform:translateX(-50%); display:flex; align-items:center; gap:4px; padding:4px; border-radius:24px; border:1px solid rgba(255,255,255,0.2); background:rgba(30,30,28,0.85); cursor:default; }
.fp-lb-bar button { width:40px; height:40px; border-radius:20px; border:0; background:transparent; color:#f0efe9; font-size:22px; line-height:1; cursor:pointer; }
.fp-lb-bar button.fp-lb-reset { min-width:56px; width:auto; font:500 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace; letter-spacing:0.04em; }
.fp-lb-close { position:absolute; top:16px; right:16px; width:44px; height:44px; border-radius:22px; border:1px solid rgba(255,255,255,0.25); background:rgba(30,30,28,0.8); color:#f0efe9; font-size:22px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; }

/* ---------- Responsive ---------- */
/* Five nav links + EN/DE + two buttons need ~1120px (German labels are longer). */
@media (max-width: 1120px) {
  .fp-navlinks { display:none !important; }
  .fp-burger { display:inline-flex; }
  .fp-mobmenu { display:block; }
  .fp-scrim { display:block; }
}
@media (max-width: 960px) {
  .fp-hero { padding-top: 136px !important; }
  [id] { scroll-margin-top: 96px; }
}
@media (max-width: 760px) {
  .fp-tilt, .fp-stage:hover .fp-tilt { transform: none; }
  .fp-num { font-size:52px; }
  .fp-frame::before { transform: translate(10px,10px) rotate(1.5deg); }
  .fp-frame::after { transform: translate(5px,5px) rotate(.8deg); }
  .fp-frame { margin-right:10px !important; margin-bottom:10px !important; }
  .fp-layouts { grid-template-columns: repeat(3,minmax(0,1fr)) !important; gap:18px 12px !important; }
}
@media (max-width: 560px) {
  .fp-navcta { display:none !important; }
  .fp-wordmark { font-size:19px !important; }
  .fp-hero { padding: 112px 16px 104px !important; }
  .fp-hero h1 { font-size: 36px !important; }
  .fp-hero-cta a { flex: 1 1 100%; justify-content:center; }
  .fp-stage { padding: 18px 14px 34px 0 !important; }
  .fp-sheet1 { transform: translate(14px,14px) rotate(2deg) !important; }
  .fp-sheet2 { transform: translate(7px,7px) rotate(1deg) !important; }
  .fp-chip-a, .fp-chip-b, .fp-chip-c { font-size:12px !important; padding:8px 12px !important; }
  .fp-chip-a { left:-4px !important; top:12% !important; }
  .fp-chip-b { right:-4px !important; top:-16px !important; }
  .fp-chip-c { right:4px !important; bottom:-16px !important; }
  .fp-stats { grid-template-columns: repeat(2,minmax(0,1fr)) !important; gap:22px 16px !important; }
  .fp-stats > div:last-child { grid-column: 1 / -1; }
  .fp-stat { font-size:30px !important; }
  .fp-cta-mark { width:95% !important; left:-30% !important; opacity:.12 !important; }
}
/* Phones: the form card spans the full width of the orange panel so Turnstile's
   300px widget fits inside it (iPhone SE: 375 - 2*16 gutter - 2*20 padding = 303px). */
@media (max-width: 560px) {
  .fp-cta-grid { padding: 36px 0 0 !important; gap: 30px !important; }
  .fp-cta-copy { padding: 0 20px; }
  .fp-form-card { border-radius: 28px 28px 36px 36px !important; padding: 24px 20px 26px !important; box-shadow: inset 0 1px 0 var(--hi) !important; }
}
@media (max-width: 380px) { .fp-chip-b { display:none !important; } .fp-hero h1 { font-size: 32px !important; } }
@media (prefers-reduced-motion: reduce) {
  .fp-landed { animation: none !important; }
  .fp-mobmenu, .fp-mobmenu *, .fp-scrim, .fp-burger * { animation: none !important; }
  .fp-float { animation: none; }
  .fp-tilt, .fp-btn, .fp-tile { transition: none; }
}