:root {
  color-scheme: light dark;
  --forest-950: #071b14;
  --forest-900: #0d2d22;
  --forest-800: #174636;
  --moss-600: #507d57;
  --sage-400: #99b88d;
  --sage-200: #d3dfc9;
  --cream-100: #f8f1df;
  --cream-200: #eee1c3;
  --amber-400: #d7a64e;
  --ink: #10231b;
  --line-dark: rgb(248 241 223 / 20%);
  --line-light: rgb(16 35 27 / 18%);
  --content: 1200px;
  font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  background: var(--forest-950);
  color: var(--cream-100);
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--cream-100); color: var(--ink); }
a { color: inherit; text-underline-offset: .2em; }
img { display: block; max-width: 100%; height: auto; }
video { display: block; max-width: 100%; }
p { text-wrap: pretty; }
h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { text-wrap: balance; overflow-wrap: break-word; hyphens: none; }
html[lang="de"] h1, html[lang="de"] h2, html[lang="de"] h3 { hyphens: auto; }
section[id] { scroll-margin-top: 24px; }

.skip-link { position: fixed; z-index: 20; top: 10px; left: 10px; padding: 10px 14px; background: var(--cream-100); color: var(--ink); transform: translateY(-180%); }
.skip-link:focus { transform: translateY(0); }

.site-header { position: absolute; z-index: 10; top: 0; right: 0; left: 0; color: var(--cream-100); }
.navigation { width: min(calc(100% - 48px), var(--content)); margin: 0 auto; padding: 18px 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 28px; border-bottom: 1px solid var(--line-dark); }
.brand { min-height: 44px; display: inline-flex; align-items: center; gap: 12px; font-weight: 780; letter-spacing: -.025em; text-decoration: none; white-space: nowrap; }
.brand-mark { width: 38px; height: 38px; flex: none; border-radius: 11px; box-shadow: 0 0 0 1px rgb(248 241 223 / 18%), 0 8px 22px rgb(0 0 0 / 18%); }
.nav-links { justify-self: end; display: flex; align-items: center; gap: 4px; font-size: .92rem; }
.nav-links a, .language-link { min-width: 44px; min-height: 44px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; opacity: .78; }
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a[aria-current="page"], .language-link:hover, .language-link:focus-visible { opacity: 1; }
.nav-links a[aria-current="page"] { box-shadow: inset 0 -1px var(--cream-100); }
.language-link { border: 1px solid var(--line-dark); border-radius: 999px; font-weight: 780; }

.hero { position: relative; isolation: isolate; min-height: 100svh; padding: 148px max(24px, calc((100vw - var(--content)) / 2)) 76px; display: flex; align-items: center; overflow: hidden; background: var(--forest-950); color: var(--cream-100); }
.hero::after { position: absolute; z-index: -1; inset: 0; content: ""; background: linear-gradient(90deg, rgb(7 27 20 / 98%) 0%, rgb(7 27 20 / 90%) 36%, rgb(7 27 20 / 44%) 66%, rgb(7 27 20 / 18%) 100%), linear-gradient(180deg, rgb(7 27 20 / 25%) 0%, transparent 48%, rgb(7 27 20 / 58%) 100%); }
.hero-atmosphere { position: absolute; z-index: -2; inset: 0; margin: 0; }
.hero-atmosphere img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center 54%; filter: saturate(.92) contrast(1.02) brightness(.88); }
.hero-copy { width: min(100%, 760px); }
.eyebrow { margin-bottom: 26px; color: var(--amber-400); font-size: .78rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.hero h1 { margin-bottom: 34px; font-weight: 820; }
.hero-product { display: block; font-size: clamp(4.8rem, 8.3vw, 8.4rem); letter-spacing: -.072em; line-height: .82; }
.hero-promise { display: block; max-width: 620px; margin-top: 30px; color: var(--sage-200); font-size: clamp(2.15rem, 3.5vw, 3.8rem); letter-spacing: -.055em; line-height: .96; }
.lede { max-width: 680px; font-size: clamp(1.14rem, 1.8vw, 1.5rem); line-height: 1.48; opacity: .86; }
.actions { margin-top: 42px; display: flex; flex-wrap: wrap; align-items: center; gap: 24px; }
.primary-action { min-height: 48px; padding: 13px 22px; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--forest-900); background: var(--forest-900); color: var(--cream-100); font-weight: 760; text-decoration: none; }
.primary-action:hover, .primary-action:focus-visible { background: var(--moss-600); border-color: var(--moss-600); }
.primary-action.light { border-color: var(--cream-100); background: var(--cream-100); color: var(--forest-950); }
.text-action { min-height: 44px; display: inline-flex; align-items: center; font-weight: 720; }
.text-action.on-dark { color: var(--cream-100); }
.status-note { margin-top: 32px; max-width: 620px; font-size: .88rem; line-height: 1.5; opacity: .6; }
.hero-proof { margin: 26px 0 0; padding-top: 18px; max-width: 520px; border-top: 1px solid var(--line-dark); font-size: .78rem; line-height: 1.45; opacity: .58; }
.device { overflow: hidden; border: 12px solid #020b07; background: #020b07; }
.device.phone { max-width: 430px; border-radius: 68px 68px 22px 22px; }
.device.phone.compact { max-width: 360px; }

.growth-section, .journey-section, .privacy-section { padding: 132px max(24px, calc((100vw - var(--content)) / 2)); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(56px, 8vw, 130px); }
.growth-section { background: var(--sage-200); }
.growth-film-section { padding: 132px max(24px, calc((100vw - var(--content)) / 2)); background: #e8e1ce; }
.growth-film-section .section-heading { max-width: 850px; }
.growth-film { margin: 64px 0 0; }
.growth-film video { width: 100%; border: 1px solid rgb(16 35 27 / 24%); border-radius: 18px; background: var(--forest-950); box-shadow: 0 28px 80px rgb(16 35 27 / 14%); }
.growth-film figcaption { margin-top: 16px; color: rgb(16 35 27 / 68%); font-size: .82rem; line-height: 1.5; }
.section-copy h2, .section-heading h2, .open-section h2 { margin-bottom: 30px; font-size: clamp(3rem, 5.4vw, 5.55rem); font-weight: 820; letter-spacing: -.058em; line-height: .94; }
.section-copy > p:not(.eyebrow), .section-heading > p:not(.eyebrow), .open-section > p:not(.eyebrow) { font-size: clamp(1.08rem, 1.7vw, 1.35rem); line-height: 1.58; opacity: .78; }
.wide-device { margin: 0; overflow: hidden; border: 1px solid rgb(7 27 20 / 22%); border-radius: 28px; background: var(--forest-950); box-shadow: 0 28px 70px rgb(7 27 20 / 16%); }
.wide-device img { width: 100%; }
.fact-line { margin: 42px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line-light); }
.fact-line li { padding: 14px 0; border-bottom: 1px solid var(--line-light); font-weight: 720; }

.modes-section { padding: 132px max(24px, calc((100vw - var(--content)) / 2)); background: var(--cream-100); }
.section-heading { max-width: 850px; }
.mode-list, .principle-list { margin: 76px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(34px, 7vw, 86px); list-style: none; }
.mode-list li, .principle-list li { padding-top: 22px; border-top: 2px solid var(--forest-900); }
.mode-number { color: var(--moss-600); font-size: .78rem; font-weight: 820; letter-spacing: .12em; }
.mode-list h3, .principle-list h2 { margin: 28px 0 18px; font-size: 1.7rem; letter-spacing: -.035em; }
.mode-list p, .principle-list p { margin: 0; line-height: 1.55; opacity: .74; }

.journey-section { background: #e7eedf; }
.journey-visual { margin: 0; justify-self: center; }
.privacy-section { overflow: hidden; background: #1d2834; color: var(--cream-100); }
.journal-visual { margin: 0 -22% -38% 0; overflow: hidden; border: 1px solid rgb(248 241 223 / 15%); border-radius: 28px; background: #0c1518; box-shadow: 0 30px 80px rgb(0 0 0 / 28%); }
.open-section { padding: 150px max(24px, calc((100vw - 900px) / 2)); background: var(--forest-800); color: var(--cream-100); text-align: center; }
.open-section > p:not(.eyebrow) { max-width: 780px; margin-right: auto; margin-left: auto; }
.open-section .primary-action { margin-top: 28px; }

.page-support, .page-privacy, .page-openSource { background: var(--cream-100); }
.page-support .site-header, .page-privacy .site-header, .page-openSource .site-header { position: relative; background: var(--forest-950); }
.article-shell { min-height: 72svh; padding: 110px max(24px, calc((100vw - 980px) / 2)) 140px; }
.article-hero { padding-bottom: 72px; border-bottom: 1px solid var(--line-light); }
.article-hero h1 { max-width: 900px; margin-bottom: 34px; color: var(--forest-950); font-size: clamp(3.4rem, 7vw, 6.7rem); font-weight: 820; letter-spacing: -.067em; line-height: .9; }
.article-content { max-width: 820px; margin-top: 80px; }
.article-content section { padding: 0 0 52px; }
.article-content h2 { margin-bottom: 18px; font-size: clamp(1.7rem, 3vw, 2.35rem); letter-spacing: -.035em; }
.article-content p { font-size: 1.08rem; line-height: 1.7; opacity: .78; }
.support-route { margin-top: 20px; padding-top: 52px !important; border-top: 1px solid var(--line-light); }
.support-route .primary-action { margin-top: 14px; }
.open-source-shell { max-width: none; }
.principle-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.repository-callout { max-width: 740px; margin-top: 90px; padding-top: 38px; border-top: 1px solid var(--line-light); }
.repository-label { margin-bottom: 0; color: var(--forest-900); font-size: clamp(1.35rem, 2.6vw, 2rem); font-weight: 800; letter-spacing: -.035em; }
.repository-callout p { margin-top: 24px; line-height: 1.6; opacity: .72; }
.repository-callout .repository-label { margin-top: 0; opacity: 1; }

.site-footer { padding: 70px max(24px, calc((100vw - var(--content)) / 2)); display: grid; grid-template-columns: 1.3fr 1fr auto; gap: 50px; background: var(--forest-950); color: var(--cream-100); }
.site-footer p { margin: 14px 0 0; max-width: 460px; font-size: .88rem; line-height: 1.55; opacity: .6; }
.footer-status p:first-child { margin-top: 0; }
.site-footer nav { display: flex; flex-direction: column; gap: 12px; font-size: .9rem; }
.site-footer nav a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; }

:focus-visible { outline: 3px solid var(--amber-400); outline-offset: 4px; }

@keyframes hero-image-arrive {
  from { opacity: .62; transform: scale(1.045); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes hero-copy-arrive {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: no-preference) {
  .brand-mark, .nav-links a, .language-link, .primary-action, .text-action, .device img, .wide-device img, .journal-visual img { transition: transform 240ms ease, opacity 180ms ease, background-color 180ms ease, border-color 180ms ease; }
  .brand:hover .brand-mark, .brand:focus-visible .brand-mark { transform: translateY(-1px) scale(1.04); }
  .primary-action:hover, .primary-action:focus-visible, .text-action:hover, .text-action:focus-visible { transform: translateY(-2px); }
  .device:hover img, .wide-device:hover img, .journal-visual:hover img { transform: scale(1.012); }
  .hero-atmosphere img { animation: hero-image-arrive 1400ms cubic-bezier(.2, .72, .24, 1) both; }
  .hero-copy > * { animation: hero-copy-arrive 720ms cubic-bezier(.2, .72, .24, 1) both; }
  .hero-copy > :nth-child(2) { animation-delay: 90ms; }
  .hero-copy > :nth-child(3) { animation-delay: 170ms; }
  .hero-copy > :nth-child(4) { animation-delay: 250ms; }
  .hero-copy > :nth-child(5) { animation-delay: 330ms; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

@media (max-width: 860px) {
  .navigation { width: min(calc(100% - 32px), var(--content)); padding: 12px 0 8px; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; }
  .nav-links { width: 100%; grid-column: 1 / -1; justify-self: stretch; justify-content: flex-start; gap: 2px; overflow-x: auto; padding-bottom: 2px; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { flex: 0 0 auto; }
  .language-link { grid-column: 2; grid-row: 1; }
  .hero { min-height: 100svh; padding-top: 152px; padding-bottom: 58px; }
  .hero::after { background: linear-gradient(180deg, rgb(7 27 20 / 97%) 0%, rgb(7 27 20 / 88%) 47%, rgb(7 27 20 / 50%) 72%, rgb(7 27 20 / 72%) 100%); }
  .hero-atmosphere img { object-position: center 44%; filter: saturate(.86) brightness(.68); }
  .hero-copy { max-width: 640px; }
  .growth-section, .growth-film-section, .journey-section, .privacy-section { padding-top: 90px; padding-bottom: 90px; grid-template-columns: 1fr; }
  .journey-visual { order: 2; }
  .mode-list, .principle-list { margin-top: 56px; grid-template-columns: 1fr; }
  .journal-visual { margin: 0; }
  .site-footer { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .brand { gap: 9px; font-size: .94rem; }
  .brand-mark { width: 36px; height: 36px; border-radius: 10px; }
  .nav-links a { padding-right: 9px; padding-left: 9px; font-size: .86rem; }
  .hero { padding-top: 146px; padding-bottom: 42px; }
  .hero .eyebrow { margin-bottom: 18px; }
  .hero-product { font-size: clamp(3.55rem, 18vw, 4.75rem); }
  .hero-promise { margin-top: 22px; font-size: clamp(1.78rem, 9vw, 2.45rem); }
  .hero h1 { margin-bottom: 26px; }
  .hero .lede { font-size: 1rem; line-height: 1.45; }
  .article-hero h1 { font-size: clamp(3.1rem, 16vw, 4.8rem); }
  .section-copy h2, .section-heading h2, .open-section h2 { font-size: clamp(2.7rem, 13vw, 4rem); }
  .actions { margin-top: 28px; align-items: flex-start; flex-direction: column; gap: 12px; }
  .hero-proof { margin-top: 18px; padding-top: 14px; }
  .device.phone { border-width: 8px; border-radius: 44px 44px 16px 16px; }
  .growth-film video, .wide-device, .journal-visual { border-radius: 12px; }
  .article-shell { padding-top: 74px; padding-bottom: 90px; }
}

@media (max-width: 360px) {
  .hero-proof { display: none; }
}