html { scroll-behavior: smooth; }
  body {
    font-family: "Space Grotesk", sans-serif;
    background-color: #1B1B1E;
    color: #F5F4F1;
  }
  ::selection { background: #FF4D00; color: #1B1B1E; }

  .grain-line {
    height: 1px;
    background: linear-gradient(90deg, #FF4D00 0%, #FF4D00 8%, rgba(107,110,117,0.35) 8%, rgba(107,110,117,0.35) 100%);
  }

  @keyframes pulseDot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
  }
  .pulse-dot { animation: pulseDot 2.4s ease-in-out infinite; }

  @keyframes riseIn {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .rise { animation: riseIn 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }

  .card-hover { transition: border-color 0.3s ease, transform 0.3s ease, background-color 0.3s ease; }
  .card-hover:hover {
    border-color: #FF4D00;
    transform: translateY(-4px);
    background-color: #212125;
  }
  .card-hover:hover .card-index { color: #FF4D00; }

  .num-bg {
    font-family: "IBM Plex Mono", monospace;
    color: #2a2a2f;
    -webkit-text-stroke: 1px #34343a;
  }