/* Solute Connect — landing page styles. Source: spec 2026-06-07. */
  :root {
    --ink: #0c0f14;
    --ink-soft: #2a2f3a;
    --paper: #f5f1ea;
    --paper-warm: #efe9de;
    --rule: #1a1d24;
    --accent: #d2491a;
    --accent-deep: #a8390f;
    --muted: #6b6f78;
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: var(--paper); color: var(--ink); font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
  body { padding: 28px; min-height: 100vh; }

  .frame {
    max-width: 1180px;
    margin: 0 auto;
    background: var(--paper);
    border: 1.5px solid var(--ink);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 14px 14px 0 var(--ink);
  }

  /* Top bar */
  .topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 28px;
    border-bottom: 1.5px solid var(--ink);
    background: var(--paper-warm);
    font-size: 13px;
  }
  .wordmark {
    display: flex; align-items: baseline; gap: 8px;
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 22px; font-style: italic; line-height: 1;
  }
  .wordmark .dot { width: 7px; height: 7px; background: var(--accent); border-radius: 50%; display:inline-block; }
  .wordmark .small { font-family: 'Inter', sans-serif; font-style: normal; font-size: 11px; letter-spacing: 0.15em; color: var(--muted); text-transform: uppercase; }
  .nav-links { display: flex; gap: 28px; font-size: 13px; }
  .nav-links a { color: var(--ink-soft); text-decoration: none; font-weight: 500; }
  .nav-links a:hover { color: var(--accent); }
  .badge {
    border: 1px solid var(--ink);
    padding: 3px 9px;
    border-radius: 3px;
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
  }

  /* Hero */
  .hero {
    padding: 70px 60px 50px;
    text-align: center;
    position: relative;
  }
  .eyebrow {
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--accent-deep);
    font-weight: 600;
    margin-bottom: 22px;
  }
  h1 {
    font-family: 'Instrument Serif', Georgia, serif;
    font-weight: 400;
    font-size: 78px;
    line-height: 0.95;
    letter-spacing: -0.025em;
    margin: 0 0 22px;
    color: var(--ink);
  }
  h1 em {
    font-style: italic;
    color: var(--accent);
  }
  .lead {
    font-size: 17px;
    line-height: 1.55;
    color: var(--ink-soft);
    max-width: 560px;
    margin: 0 auto 40px;
    font-weight: 400;
  }

  /* Download row */
  .downloads {
    display: inline-flex;
    gap: 0;
    border: 1.5px solid var(--ink);
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
  }
  .dl {
    display: flex; flex-direction: column; align-items: flex-start;
    padding: 16px 26px;
    border-right: 1.5px solid var(--ink);
    cursor: pointer;
    background: #fff;
    transition: background 0.15s ease;
    min-width: 170px;
    text-align: left;
  }
  .dl:last-child { border-right: none; }
  .dl:hover { background: var(--paper-warm); }
  .dl-os { display:flex; align-items:center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 2px; }
  .dl-meta { font-size: 11px; color: var(--muted); letter-spacing: 0.05em; }
  .dl-arrow {
    margin-left: auto;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--ink);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
  }
  .dl-flex { display:flex; align-items:center; gap: 16px; width: 100%; }

  /* Three-step strip */
  .steps {
    margin: 0;
    border-top: 1.5px solid var(--ink);
    border-bottom: 1.5px solid var(--ink);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    background: var(--paper);
  }
  .step {
    padding: 22px 30px;
    border-right: 1.5px solid var(--ink);
    display: flex;
    gap: 14px;
    align-items: flex-start;
  }
  .step:last-child { border-right: none; }
  .step-num {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    font-size: 36px;
    line-height: 0.9;
    color: var(--accent);
  }
  .step-body h4 { margin: 0 0 4px; font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); }
  .step-body p { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ink-soft); }

  /* App preview row */
  .preview {
    display: grid;
    grid-template-columns: 1fr 1.3fr;
    gap: 0;
  }
  .preview-text {
    padding: 50px 50px;
    border-right: 1.5px solid var(--ink);
    background: var(--paper-warm);
  }
  .preview-text h3 {
    font-family: 'Instrument Serif', serif;
    font-size: 36px;
    line-height: 1.05;
    font-weight: 400;
    margin: 0 0 18px;
    letter-spacing: -0.015em;
  }
  .preview-text h3 em { font-style: italic; color: var(--accent); }
  .preview-text p {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ink-soft);
    margin: 0 0 12px;
  }
  .for-tech {
    margin-top: 26px;
    padding-top: 18px;
    border-top: 1px dashed var(--ink);
    font-size: 12px;
    color: var(--muted);
  }
  .for-tech a { color: var(--ink); font-weight: 600; }

  .preview-app {
    padding: 40px;
    background: linear-gradient(135deg, #1a1d24 0%, #0c0f14 100%);
    display: flex; align-items: center; justify-content: center;
    position: relative;
    overflow: hidden;
  }
  .preview-app::before {
    content:'';
    position:absolute;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(210,73,26,0.15) 0%, transparent 60%);
    top: -200px; right: -200px;
  }
  .app-window {
    position: relative;
    width: 340px;
    background: #1a1d24;
    border-radius: 8px;
    border: 1px solid #2a2f3a;
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0,0,0,0.4);
  }
  .app-titlebar {
    padding: 10px 14px;
    background: #14171d;
    display: flex;
    align-items: center;
    gap: 6px;
    border-bottom: 1px solid #2a2f3a;
  }
  .app-titlebar .traffic { width: 11px; height: 11px; border-radius: 50%; }
  .app-titlebar .traffic.r { background: #ff5f57; }
  .app-titlebar .traffic.y { background: #febc2e; }
  .app-titlebar .traffic.g { background: #28c840; }
  .app-titlebar .app-title { color: rgba(255,255,255,0.4); font-size: 11px; margin-left: auto; margin-right: auto; }

  .app-body { padding: 28px 24px; }
  .app-label { font-size: 10px; letter-spacing: 0.2em; color: rgba(255,255,255,0.4); text-transform: uppercase; margin-bottom: 8px; }
  .app-id {
    font-family: 'JetBrains Mono', 'SF Mono', Menlo, monospace;
    font-size: 36px;
    color: #fff;
    letter-spacing: 0.08em;
    margin-bottom: 22px;
    font-weight: 600;
  }
  .app-status { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: rgba(40, 200, 64, 0.1); border: 1px solid rgba(40, 200, 64, 0.3); border-radius: 6px; }
  .app-status .pulse { width: 8px; height: 8px; background: #28c840; border-radius: 50%; box-shadow: 0 0 0 0 rgba(40, 200, 64, 0.5); animation: pulse 2s infinite; }
  @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(40, 200, 64, 0.5); } 50% { box-shadow: 0 0 0 6px rgba(40, 200, 64, 0); } }
  .app-status-text { color: rgba(255,255,255,0.85); font-size: 12px; }
  .app-divider { margin: 22px 0; height: 1px; background: rgba(255,255,255,0.08); }
  .app-input-label { font-size: 11px; color: rgba(255,255,255,0.5); margin-bottom: 6px; }
  .app-input { background: #0c0f14; border: 1px solid #2a2f3a; border-radius: 5px; padding: 10px 12px; color: rgba(255,255,255,0.7); font-size: 12px; font-family: 'JetBrains Mono', monospace; }
  .app-cta { margin-top: 14px; background: var(--accent); color: #fff; padding: 10px; border-radius: 5px; text-align: center; font-size: 12px; font-weight: 600; letter-spacing: 0.05em; }

  /* Footer-ish */
  .meta-bar {
    padding: 14px 28px;
    border-top: 1.5px solid var(--ink);
    background: var(--paper-warm);
    display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); letter-spacing: 0.08em;
  }
  .meta-bar strong { color: var(--ink-soft); }

.dl.recommended { background: var(--paper-warm); box-shadow: inset 0 0 0 2px var(--accent); }
.dl.recommended::after { content: 'Aanbevolen voor uw systeem'; display: block; font-size: 10px; color: var(--accent-deep); margin-top: 6px; letter-spacing: 0.05em; text-transform: uppercase; font-weight: 600; }