:root {
    --bg: oklch(0.985 0.005 95);
    --bg-alt: oklch(0.96 0.008 150);
    --surface: #ffffff;
    --ink: oklch(0.22 0.01 240);
    --ink-soft: oklch(0.42 0.012 240);
    --ink-mute: oklch(0.58 0.012 240);
    --line: oklch(0.90 0.008 200);
    --line-soft: oklch(0.94 0.006 200);
    --brand: oklch(0.45 0.08 165);
    --brand-deep: oklch(0.32 0.07 165);
    --brand-soft: oklch(0.92 0.04 165);
    --brand-tint: oklch(0.97 0.018 165);
    --accent: oklch(0.72 0.10 75);
    --warn: oklch(0.65 0.14 35);
  }
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; }
  body {
    font-family: 'Inter', system-ui, sans-serif;
    background: var(--bg);
    color: var(--ink);
    font-size: 16px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  h1, h2, h3, h4 { font-family: 'Manrope', system-ui, sans-serif; margin: 0; letter-spacing: -0.02em; }
  .mono { font-family: 'JetBrains Mono', monospace; font-feature-settings: "tnum"; }
  .tnum { font-variant-numeric: tabular-nums; }
  button { font-family: inherit; cursor: pointer; }
  a { color: inherit; text-decoration: none; }
  ::selection { background: var(--brand); color: #fff; }

  /* Container */
  .wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
  @media (max-width: 720px) { .wrap { padding: 0 20px; } }

  /* Section spacing */
  section { padding: 96px 0; }
  @media (max-width: 720px) { section { padding: 64px 0; } }

  /* Eyebrow */
  .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--brand);
    font-weight: 500;
  }
  .eyebrow::before {
    content: ""; width: 24px; height: 1px; background: var(--brand);
  }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; gap: 10px;
    padding: 14px 22px;
    border-radius: 8px;
    font-family: 'Manrope', sans-serif;
    font-weight: 600;
    font-size: 15px;
    border: 1px solid transparent;
    transition: all .15s ease;
    background: var(--brand);
    color: #fff;
  }
  .btn:hover { background: var(--brand-deep); transform: translateY(-1px); }
  .btn-ghost {
    background: transparent;
    color: var(--ink);
    border-color: var(--line);
  }
  .btn-ghost:hover { border-color: var(--ink); background: transparent; transform: translateY(-1px); }
  .btn-arrow svg { transition: transform .2s; }
  .btn-arrow:hover svg { transform: translateX(3px); }

  /* Placeholder image (striped) */
  .ph {
    position: relative;
    background: repeating-linear-gradient(
      135deg,
      oklch(0.94 0.01 165) 0,
      oklch(0.94 0.01 165) 12px,
      oklch(0.91 0.015 165) 12px,
      oklch(0.91 0.015 165) 24px
    );
    border-radius: 12px;
    overflow: hidden;
    color: oklch(0.45 0.04 165);
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px;
  }
  .ph-label {
    background: rgba(255,255,255,0.85);
    padding: 6px 10px;
    border-radius: 4px;
    border: 1px solid var(--line);
    line-height: 1.4;
    max-width: 80%;
  }

  /* Animations */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .fade-in { animation: fadeUp .5s ease both; }

  @keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
  }
  .pulse { animation: pulse 2s ease-in-out infinite; }

  /* Marquee */
  @keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* Tweaks panel scoped */
  #tweaks-root { font-family: 'Inter', sans-serif; }