/* Tokens, mirrored from the app's src/theme/tokens.ts */
  :root {
    --bg: #0E0E10;
    --surface: #161619;
    --elevated: #1E1E22;
    --pressed: #26262B;
    --border: #2A2A30;
    --border-strong: #3A3A42;
    --text: #EDEDED;
    --text-2: #A1A1AA;
    --text-3: #6B6B73;
    --accent: #7C5CFF;
    --accent-pressed: #6A4AE6;
    --on-accent: #FFFFFF;
    --success: #34D399;
    --r: 16px;
    --shell: 1100px;
  }
  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scrollbar-gutter: stable; }
  body {
    background: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
  }
  a { color: var(--accent); text-decoration: none; }
  a:hover { text-decoration: underline; }
  .shell { max-width: var(--shell); margin: 0 auto; padding: 0 24px; }

  /* One interaction system: press squash, no hover growth. */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 52px;
    padding: 0 28px;
    border-radius: 999px;
    border: 0;
    font: 600 16px/1 inherit;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 80ms ease-out, background-color 140ms ease-out;
  }
  .btn:active { transform: scale(0.97); }
  .btn-primary { background: var(--accent); color: var(--on-accent); }
  .btn-primary:hover { background: var(--accent-pressed); text-decoration: none; }
  .btn-quiet { background: var(--elevated); color: var(--text); }
  .btn-quiet:hover { background: var(--pressed); text-decoration: none; }
  .btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

  /* Header */
  header { padding: 20px 0; }
  .header-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
  .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 800; font-size: 20px; letter-spacing: -0.3px; }
  .brand:hover { text-decoration: none; }
  .brand svg { display: block; }
  nav { display: flex; align-items: center; gap: 24px; min-width: 0; }
  nav a { color: var(--text-2); font-weight: 600; font-size: 14px; white-space: nowrap; }
  nav a:hover { color: var(--text); text-decoration: none; }

  /* Hero */
  .hero { display: flex; align-items: center; gap: 48px; padding: 56px 0 72px; }
  .hero-copy { flex: 1; min-width: 0; }
  h1 {
    font-size: clamp(38px, 6vw, 60px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -1px;
    text-wrap: balance;
  }
  .hero-sub { margin-top: 20px; font-size: 19px; color: var(--text-2); max-width: 34em; }
  .hero-ctas { margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; }
  .hero-hint { margin-top: 16px; font-size: 13px; color: var(--text-3); }

  /* Phone frames. Depth is one hard offset shadow, no blur, no light. */
  .phone {
    position: relative;
    width: 300px;
    border-radius: 36px;
    border: 1px solid var(--border-strong);
    background: #000;
    padding: 10px;
    box-shadow: 8px 8px 0 0 #000;
    flex-shrink: 0;
  }
  .phone-screen {
    display: block; /* spans are inline and inline boxes ignore aspect-ratio */
    position: relative;
    overflow: hidden;
    border-radius: 27px;
    aspect-ratio: 390 / 844;
    background: var(--surface);
  }
  .phone-screen img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
  }
  /* Sample-data stamp: the one tilt motif, same angle everywhere. */
  .stamp {
    position: absolute;
    top: 22px;
    right: -10px;
    z-index: 2;
    transform: rotate(-2.5deg);
    background: var(--success);
    color: #06281C;
    font-size: 11px;
    font-weight: 700;
    padding: 5px 10px;
    border-radius: 999px;
    box-shadow: 3px 3px 0 0 #000;
  }

  /* Hero phone pages through shots on tap. */
  .phone-tap { cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .phone-tap:active .phone-screen { transform: scale(0.985); }
  .phone-tap .phone-screen { transition: transform 80ms ease-out; }
  .phone-tap img { transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 200ms ease-out; }
  .phone-tap img.leaving { transform: translateY(-24px); opacity: 0; }
  .phone-tap img.entering { transform: translateY(24px); opacity: 0; transition: none; }
  .dots { display: flex; justify-content: center; gap: 8px; padding: 16px 0 2px; }
  .dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--border-strong); transition: background-color 140ms ease-out; }
  .dots i.on { background: var(--text); }

  /* Sections */
  section { padding: 56px 0; }
  .section-kicker { color: var(--accent); font-weight: 700; font-size: 14px; }
  h2 { font-size: clamp(28px, 4vw, 40px); line-height: 1.12; font-weight: 800; letter-spacing: -0.6px; margin-top: 8px; text-wrap: balance; }
  .section-sub { margin-top: 12px; color: var(--text-2); max-width: 42em; }

  /* Product: three phones, each one screen of the app. */
  .trio { display: flex; gap: 32px; margin-top: 44px; justify-content: space-between; }
  .trio-item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; }
  .trio-item .phone { width: 100%; max-width: 280px; }
  .trio-item h3 { margin-top: 22px; font-size: 20px; font-weight: 700; }
  .trio-item p { margin-top: 6px; color: var(--text-2); font-size: 15px; text-align: center; max-width: 28em; }

  /* Organizers: flat rows on one surface, no card grid noise. */
  .org-list { margin-top: 36px; border-radius: var(--r); background: var(--surface); overflow: hidden; }
  .org-row { display: flex; gap: 20px; padding: 24px 28px; align-items: flex-start; }
  .org-row + .org-row { border-top: 1px solid var(--border); }
  .org-icon {
    width: 44px; height: 44px; flex-shrink: 0;
    border-radius: 12px;
    background: var(--elevated);
    display: flex; align-items: center; justify-content: center;
    color: var(--text);
  }
  .org-icon svg { width: 22px; height: 22px; }
  .org-body { min-width: 0; }
  .org-body h3 { font-size: 17px; font-weight: 700; }
  .org-body p { margin-top: 4px; color: var(--text-2); font-size: 15px; }
  .org-cta { margin-top: 28px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
  .org-cta span { color: var(--text-3); font-size: 14px; }

  /* The idea: the quiet block. */
  .invest { border-top: 1px solid var(--border); }
  .invest-cols { display: flex; gap: 48px; margin-top: 32px; }
  .invest-col { flex: 1; min-width: 0; }
  .invest-col h3 { font-size: 17px; font-weight: 700; }
  .invest-col p { margin-top: 8px; color: var(--text-2); font-size: 15px; }
  .invest-note { margin-top: 36px; padding: 24px 28px; border-radius: var(--r); background: var(--surface); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
  .invest-note p { color: var(--text-2); font-size: 15px; max-width: 36em; }

  footer { border-top: 1px solid var(--border); padding: 36px 0 48px; margin-top: 40px; }
  .foot-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .foot-row p { color: var(--text-3); font-size: 13px; }
  .foot-row a { color: var(--text-2); font-size: 13px; }

  @media (max-width: 380px) {
    .shell { padding: 0 16px; }
    nav { gap: 14px; }
    nav a { font-size: 13px; }
  }
  @media (max-width: 900px) {
    .hero { flex-direction: column; padding: 32px 0 48px; }
    .hero-phone-wrap { order: 2; }
    .trio { flex-direction: column; align-items: center; gap: 48px; }
    .invest-cols { flex-direction: column; gap: 28px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .btn, .phone-tap .phone-screen, .phone-tap img, .dots i { transition: none; }
  }

/* Document pages (Bildnachweise): a legal footnote is text, not a product
   surface. No cards, no pill buttons, no jewelry. */
.doc { padding: 56px 0 72px; max-width: 68ch; }
.doc h1 { font-size: clamp(28px, 4vw, 36px); line-height: 1.15; font-weight: 800; letter-spacing: -0.5px; }
.doc p { margin-top: 16px; color: var(--text-2); }
.doc ul { margin: 28px 0 0 20px; }
.doc li { color: var(--text-2); margin-top: 10px; line-height: 1.5; }