html, body { background: #0a0805; }
body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-feature-settings: "ss01", "cv11", "cv02";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.011em;
  color: #f1eee8;
}
*:focus { outline: none; }
*:focus-visible { outline: 1px solid rgba(255,159,46,.5); outline-offset: 2px; }
::selection { background: #FF9F2E; color: #fff; }

.tabular { font-variant-numeric: tabular-nums; }

/* Tiny live dot */
.dot {
  display: inline-block;
  width: 6px; height: 6px; border-radius: 50%;
  background: #34d399;
}

/* Reveal */
.reveal { opacity: 0; transform: translateY(12px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
.reveal[data-delay="1"]{ transition-delay: .06s }
.reveal[data-delay="2"]{ transition-delay: .12s }
.reveal[data-delay="3"]{ transition-delay: .18s }
.reveal[data-delay="4"]{ transition-delay: .24s }

/* Marquee */
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent); }
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 70s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Native dialog */
.sim-dialog {
  color: #f1eee8;
  border: 1px solid rgba(255,255,255,.10);
  background: #13100a;
}
.sim-dialog::backdrop { background: rgba(0,0,0,.7); }
.sim-dialog[open] { animation: dlgIn .18s ease-out; }
@keyframes dlgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Terminal */
.terminal {
  background: #0e0b07;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
  line-height: 1.7;
  overflow: hidden;
}
.terminal-bar {
  display: flex; gap: 6px;
  padding: 9px 12px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.terminal-bar span { width: 8px; height: 8px; border-radius: 50%; }

/* App preview frame — minimal */
.app-frame {
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
  background: #0e0b07;
}

/* Hover for cards */
.card-hover {
  transition: border-color .25s ease, background-color .25s ease;
}
.card-hover:hover {
  border-color: rgba(255,159,46,.35);
}

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
}