:root{
    --ink:#0B0B0D;
    --panel:#141416;
    --panel-line:#232326;
    --paper:#F7F5F0;
    --paper-dim:#EDEAE2;
    --amber:#E8A33D;
    --amber-soft:#F4C97C;
    --stone:#8B8880;
    --stone-dark:#57544D;
    --green:#6FCF97;
  }

  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  body{
    margin:0;
    background:var(--paper);
    color:var(--ink);
    font-family:'Inter', sans-serif;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Space Grotesk', sans-serif;
    letter-spacing:-0.02em;
  }
  .mono{
    font-family:'JetBrains Mono', monospace;
    letter-spacing:0.02em;
  }
  ::selection{ background:var(--amber); color:var(--ink); }

  @media (prefers-reduced-motion: no-preference){
    .reveal{
      opacity:0;
      transform:translateY(24px);
      transition:opacity .7s ease, transform .7s ease;
    }
    .reveal.in{ opacity:1; transform:translateY(0); }
  }
  @media (prefers-reduced-motion: reduce){
    html{ scroll-behavior:auto; }
  }

  a:focus-visible, button:focus-visible, [tabindex]:focus-visible{
    outline:2px solid var(--amber);
    outline-offset:3px;
    border-radius:2px;
  }

  .bracket{
    color:var(--amber);
    font-family:'JetBrains Mono', monospace;
  }

  .eyebrow{
    font-family:'JetBrains Mono', monospace;
    font-size:0.72rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--amber);
    display:inline-flex;
    align-items:center;
    gap:.5em;
  }
  .eyebrow::before{ content:"//"; opacity:.7; }

  .btn-primary{
    background:var(--amber);
    color:var(--ink);
    font-weight:600;
    transition:transform .2s ease, box-shadow .2s ease, background .2s ease;
    box-shadow:0 0 0 0 rgba(232,163,61,0);
  }
  .btn-primary:hover{
    background:var(--amber-soft);
    transform:translateY(-2px);
    box-shadow:0 10px 24px -8px rgba(232,163,61,.55);
  }
  .btn-outline{
    border:1.5px solid currentColor;
    transition:transform .2s ease, background .2s ease, color .2s ease;
  }
  .btn-outline:hover{ transform:translateY(-2px); }

  .card{
    background:#fff;
    border:1px solid #E7E3D8;
    transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  }
  .card:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 40px -18px rgba(11,11,13,.25);
    border-color:#D9D2BF;
  }

  .cursor-blink{
    display:inline-block;
    width:.12ch;
    background:var(--amber);
    animation:blink 1.1s steps(1) infinite;
  }
  @keyframes blink{ 50%{ opacity:0; } }

  /* Editor mock */
  .editor{
    background:var(--panel);
    border:1px solid var(--panel-line);
  }
  .editor-dot{ width:10px; height:10px; border-radius:999px; }
  .code-line{ display:flex; gap:1em; font-family:'JetBrains Mono', monospace; font-size:.8rem; line-height:1.9; }
  .code-line .ln{ color:#4A4A4E; width:1.4em; text-align:right; user-select:none; flex-shrink:0; }
  .tok-kw{ color:#E8A33D; }
  .tok-str{ color:#8FD9A8; }
  .tok-fn{ color:#7BB8F0; }
  .tok-com{ color:#5C5C60; }
  .tok-txt{ color:#D7D5CE; }

  /* dotted process line */
  .process-line{
    background-image: linear-gradient(to right, var(--amber) 40%, transparent 40%);
    background-size: 14px 2px;
    background-repeat: repeat-x;
    background-position: center;
  }
  .process-line-v{
    background-image: linear-gradient(to bottom, var(--amber) 40%, transparent 40%);
    background-size: 2px 14px;
    background-repeat: repeat-y;
    background-position: center;
  }

  .browser-frame{
    background:#fff;
    border:1px solid #E7E3D8;
  }
  .browser-bar{
    background:#F1EEE5;
    border-bottom:1px solid #E7E3D8;
  }

  .num-tag{
    font-family:'JetBrains Mono', monospace;
    font-size:.72rem;
    color:var(--amber);
  }

  #mobile-menu{
    transform:translateY(-8px);
    opacity:0;
    pointer-events:none;
    transition:transform .25s ease, opacity .25s ease;
  }
  #mobile-menu.open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  .menu-link{ color: var(--stone-dark); transition: color .2s ease; }
  .menu-link:hover{ color: var(--ink); }

  .nav-link.active{ color: var(--amber); }
  .menu-link.active{ color: var(--amber); }

  .marquee-track{
    animation: marquee 28s linear infinite;
  }
  @media (prefers-reduced-motion: reduce){
    .marquee-track{ animation:none; }
  }
  @keyframes marquee{
    from{ transform:translateX(0); }
    to{ transform:translateX(-50%); }
  }